Mathjax3 doesnt work when changing the number in the equasion in Vue3

Question

I am workin on a website in Vue3, and i want to display an equation based on user input with Mathjax3.The problem is that i cant get Matjax to re-render the equation when the user input changes.

<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>

I used the CDN for including MathJax in my project.

  <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>

This is in my public/index.html file, in the header.