How to get Vue.js function data in Laravel-5.4 blade template after adding extra input fields with jQuery

Question

got this calculation table initially just one row with simple calculation from price multiply quantity.

var app=new Vue({
         el: "#app",
         data: {
         value: '',
         quantity: '',
         total: 0
       },
     computed: {

         calc: function() {

          return this.total = parseFloat(this.value) * parseFloat(this.quantity);  

          },
     }
  });

then I add same multiple rows with jQuery. But when I wanted to do the same calculations for other rows then its not working. may be as the page is not refreshing and the @{{ calc }} code is not executing. Its just showing {{ calc }} in the other rows.

html code:

<input id="amount" name="amount" required="required" type="text"  v-model="value">

<input id="quantity" name="quantity" required="required" type="number" min="0" value="0"  v-model="quantity">

<p>@{{ calc }}</p>

<button type="button" id="addBillingRow" class="btn btn-success btn-sm fa fa-plus fa-3x"></button>