Estoy trabajando en un sitio web en Vue3 y quiero mostrar una ecuación basada en la entrada del usuario con Mathjax3. El problema es que no puedo hacer que Matjax vuelva a representar la ecuación cuando cambia la entrada del usuario.

 <template> <p >$ x = {5 \over {{ fakt_display }}}$</p> </template> <script> export default { props: { number_off_elements: { default: 1, type: Number, }, classes_arr: { default: () => [], type: Array, }, result: { default: 1, type: Number, }, }, watch: { number_off_elements: function () { //this doesnt work,but a want to re-render when this changes window.MathJax.startup.document.state(0); window.MathJax.texReset(); window.MathJax.typeset(); }, }, computed: { fakt_display: function () { if (this.number_off_elements === 0) { return "0"; } else if (this.number_off_elements === 3) { return "3*2*1"; } else if (this.number_off_elements === 2) { return "2*1"; } else if (this.number_off_elements === 1) { return "1"; } else { return `${this.number_off_elements}*${this.number_off_elements - 1}*${ this.number_off_elements - 2 }...*1`; } }, }, }; </script>

Usé el CDN para incluir MathJax en mi proyecto.

 <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }, svg: { fontCache: 'global' } }; </script> <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"> </script>

Esto está en mi archivo public/index.html, en el encabezado.