Cannot show mathematical equation in Vue using mathlive and katex

I'm doing a project to create a simple LaTeX generator in vue. The flow it self is like this: user writes a mathematical formula using MathLive -> the program displays the formula using KaTeX. But I still can't display the written formula from mathLive. I try to use v-model but it's not working. This is the code that didn't work:

<template>
  <div class="hello">
    <math-field v-model="mathFormula"></math-field>
    <div v-katex="mathForm"></div>
  </div>
</template>

<script>
import { MathfieldElement} from 'mathlive';

export default {
  name: 'HelloWorld',
  computed: {
    mathForm() {
      return this.mathFormula
    },
  },
  data() {
    return {
      question: "",
      mfe: new MathfieldElement(),
      mathFormula: '',
    }
  }
}
</script>

Anyone know where did I go wrong and how can I fix it so it would work? Thanks in advance