Using VueJs V-loop for calculations

I am using Vuejs and the directive (v-effect) I have this code

         <tr>
          <td>Product Cost</td>
            <td>Quantity</td>
            <td>Amount</td>
          </tr>
          <tr v-for="(product, index) in products" :key="index">
            <td>&nbsp;</td>
            <td></td>
            <td  v-effect="cost = product.amount/product.quantity"> </td>
            <td> <input
                type="text"
                class="form-control"
                v-model="product.quantity"
              /></td>
            <td v-effect="amt = cost * product.quantity"> </td>
          </tr>

The output is

Product Cost	Quantity	Amount
30	1	30
60	2	120

Quantity table, user can input the field. However it is using v-model so when user enters it affects product cost and amount. Product Cost is the unit cost. I cannot do changes to db as required. So have to work a way around this. I want to make sure is constant and not changing based on user input but must be dynamic. I tried writing functions and methods, no use..