MathJax no olvida las matemáticas anteriores y la representación no es correcta. Se representan muchas fórmulas en lugar de una.
Usé esta documentación https://docs.mathjax.org/en/latest/web/typeset.html?highlight=mathml2svg#updating-previously-typeset-content
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { value: '$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$', }; }, template: ` <div class="math-jax-container"> <v-textarea v-model="value" /> <div id="maththt" ref="mathJax" > {{ value }} </div> </div> `, watch: { value(v) { this.renderMathJax(); }, }, methods: { renderMathJax() { window.MathJax.typesetClear([this.$refs.mathJax]); window.MathJax.typeset([this.$refs.mathJax]); } }, }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script> <div id="app"></div>