I have three input fields and I want to calculate the PPMT function after the user finishes typing the values, but I have to do some calculations first. I have some values I have to define (Rate, per, nper, pv, fv, type). "Per" value first is 1 and it continues to grow unlit "nper" is 0. I tried to use a computed property for this but the page stays reloading. Should I do the calculations in a method first and then call computed property or is there any solution for this

<template>
  <div class="table">
    <table>
      <thead>
        <th>Type</th>
        <th>Segment</th>
        <th>Position</th>
        <th>10/2021</th>
      </thead>
      <tbody>
        <tr>
          <td>Input</td>
          <td>New p</td>
          <td>New Volumes</td>
          <td><input type="number" v-model="pv" /></td>
        </tr>
        <tr>
          <td>Input</td>
          <td>New p</td>
          <td>Ir %</td>
          <td><input type="number" v-model="rate" /></td>
        </tr>
        <tr>
          <td>Input</td>
          <td>New p</td>
          <td>Tenor</td>
          <td><input type="number" v-model="nper" /></td>
        </tr>
        <tr>
          <td>Calc</td>
          <td>Calc</td>
          <td>PPMT</td>
          <td>{{ ppmt }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import ExcelFormulas from "../excelFunctions";
export default {
  data() {
    return {
      rate: 0,
      pv: 0,
      nper: 0,
      per: 1,
    };
  },
  computed: {
    ppmt() {
      let ppmt = 0;
      while (this.nper >= 0) {
        let calc =
          ExcelFormulas.PPMT(this.rate / 12, this.per, this.nper, this.pv, 0, 0) ??
          0;
        ppmt += calc;
        this.per++;
        this.nper--;
      }
     return ppmt;
      
    },
  },
};
</script>