Update math equation using mathlive and vue.js

I have been struggling to use vue.js and mathlive to handle typesetting randomly generated numbers and their squares. The function of the program is to generate a random integer from 1-35 and calculate the square and typeset it with mathlive. There are two buttons that add one to the integer or create another random one. I have no problem typesetting the initial value but when I create a different integer or add 1 the page is never re-typeset. I am trying to implement this program as a component in vue.js. Here is my MWE (component only):

<template lang="html">
<div class="problem">
  <p id="math">$$^2 = $$</p>
  <button @click="addOne">Add One</button>
  <button @click="randomInt">Random Number</button>
</div>
</template>

<script>
import math from 'mathjs'
import MathLive from 'mathlive'
export default {
  name: 'Problem',
  data: function () {
    return {
      num: math.randomInt(1,35)
    }
  },
  watch: {
    num: function () {
      console.log("Data changed");
      // this.renderMath();
    }
  },
  created: function () {
    console.log("Hello This is created!");
    this.renderMath();
  },
  beforeMount: function () {
    console.log("This is beforeMount");
  },
  mounted: function () {
    console.log("This is mounted!");
  },
  beforeUpdate: function () {
    console.log("This is beforeUpdate");
    this.renderMath();
  },
  methods: {
    addOne: function() {
      this.num++
    },
    randomInt: function () {
      this.num = math.randomInt(1,35)
    },
    square: function () {
      return this.num**2
    },
    renderMath: function (event) {
      this.$nextTick(function(){
        MathLive.renderMathInElement("math");
      })
    }
  }
}
</script>

<style lang="css" scoped>
@import url("../../node_modules/mathlive/dist/mathlive.core.css");
@import url("../../node_modules/mathlive/dist/mathlive.css");
p {
  color: white;
  }
</style>

Edit: To clarify when I load the page up, the initial value is typeset correctly using mathlive as shown below: Then after I click either the add one or random button, the program should generate a new value and calculate its square and update that value on the screen as shown below: From here on out, it would update the view whenever I click either button.

from Update math equation using mathlive and vue.js