I made a quote calculator in plain JS on Codepen, and was happy with the results.

Now, I'm trying to reuse this calculator - which worked fine - within my Vue.js project. But for some reason, the console hits me with this error, when I try to use the calculator:

I suspect it's the swap from plain JS to Vue that's messing something up, but could anyone here enligthen me as to what it is I'm overlooking?

Thanks in advance

 <form>
  <div class="calculator-variables">
   <input type="text" min="0" max="100" id="churnRate" onchange="CalculateEstimate();" />
   <input type="text" min="0" max="100" id="invoulentaryChurn" onchange="CalculateEstimate();" />
   <input type="text" id="contributionMargin" onchange="CalculateEstimate();" />
   <output id="output">0</output>
   <input id="customerNumber" type="range" value="0" min="0" max="3000" step="100" onchange="CalculateEstimate(); sliderChange(this.value);" />
   <div class="range"></div>
  </div>
  <div id="result"></div>
</form>

hej

min far er en mand

<script>
 export default {
  name: "calculator",
  methods: {
    CalculateEstimate: function () {
      var b1 = parseInt(document.getElementById("churnRate").value);
      var b2 = parseInt(document.getElementById("invoulentaryChurn").value);
      var b3 = parseInt(document.getElementById("contributionMargin").value);
      var b4 = parseInt(document.getElementById("customerNumber").value);

      document.getElementById("result").innerHTML =
        (1 / (b1 / 100)) * b3 * (b4 * (b2 / 100)) * 12 * 0.5 +
    },
  },
};
</script>