title: Update value based on other input fields
body: <p>I have created a component for creating dynamic rows with input fields for invoice items. </p>
  
  <pre><code>&lt;template&gt;
      &lt;tr&gt;
          &lt;td class="p-0" align="center"&gt;&lt;label class="m-0"&gt;{{ row.id + 1 }}&lt;/label&gt;&lt;/td&gt;
          &lt;td class="p-0" align="center"&gt;
              &lt;input type="text" v-model="row.name" name="product_name[]" value="" class="form-control form-control-sm border-0" placeholder="Product Name ..."&gt;
          &lt;/td&gt;
          &lt;td class="p-0" align="center"&gt;
              &lt;input type="text" v-model="row.hsn" name="product_hsn[]" value="" class="form-control form-control-sm border-0" placeholder="900574"&gt;
          &lt;/td&gt;
          &lt;td class="p-0" align="center"&gt;
              &lt;input type="number" v-model="row.qty" name="product_qty[]" value="1" class="form-control form-control-sm border-0" placeholder="0"&gt;
          &lt;/td&gt;
          &lt;td class="p-0"&gt;
              &lt;input type="number" v-model="row.rate" name="product_rate[]" value="" class="form-control form-control-sm border-0" placeholder="0.00"&gt;
          &lt;/td&gt;
          &lt;td class="p-0"&gt;
              &lt;input type="number" v-model="row.amount" name="product_amount[]" readonly="readonly" v-bind:value="row.qty * row.rate" class="form-control form-control-sm border-0" placeholder="0.00"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      props: ['row'],
      data() {
          return {
              slabs: [0, 0.25, 3, 5, 12, 18, 28],
          }
      },
  
      mounted() {}
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But the value of <code>v-bind:value="row.qty * row.rate"</code> is <strong>not getting update</strong>. </p>
  
  <p>This is how i am using this component: </p>
  
  <pre><code>&lt;tbody&gt;
         &lt;tr v-for="(row, index) in invoiceRows" v-bind:row="row" v-bind:key="+row" is="invoice-product" v-on:remove="invoiceRows.splice(index, 1)"&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot class="hidden-print"&gt;
         &lt;tr&gt;
                &lt;td class="p-0" colspan="18"&gt;
                     &lt;a href="javascript:;" @click="_addRow()" class="p-2 mt-3" style="text-decoration:none;font-size:14px;"&gt;&lt;i class="ion-ios-plus" style="font-size:18px;"&gt;&lt;/i&gt; Add Line&lt;/a&gt;
                 &lt;/td&gt;
           &lt;/tr&gt;
   &lt;/tfoot&gt;
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>....
  computed: {
      invoiceRows() {
          return this.$store.state.items
      }
  },
  </code></pre>
  
  <p>And this is my vuex that manages all the shared states:</p>
  
  <pre><code>export const store = new Vuex.Store({
      state: {
          activeType: null,
          stateList: [],
          companyState: [],
          items: [{
              id: 0, name: null, hsn: null, qty: 1, rate: null, discount: 0,
              taxSlab: 0, cessRate: null, cessAmount: null
          }],
          billToSupplyState: [],
          shipToSupplyState: []
      },
      actions,
      mutations
  })
  </code></pre>
  
  <p>But if i remove <code>v-model="row.amount"</code> from my component then it will work. Can anyone please help and let me know what i have missed?</p>