根据其他输入字段更新值

Question

我创建了一个组件，用于创建带有发票项输入字段的动态行。

<template>
    <tr>
        <td class="p-0" align="center"><label class="m-0">{{ row.id + 1 }}</label></td>
        <td class="p-0" align="center">
            <input type="text" v-model="row.name" name="product_name[]" value="" class="form-control form-control-sm border-0" placeholder="Product Name ...">
        </td>
        <td class="p-0" align="center">
            <input type="text" v-model="row.hsn" name="product_hsn[]" value="" class="form-control form-control-sm border-0" placeholder="900574">
        </td>
        <td class="p-0" align="center">
            <input type="number" v-model="row.qty" name="product_qty[]" value="1" class="form-control form-control-sm border-0" placeholder="0">
        </td>
        <td class="p-0">
            <input type="number" v-model="row.rate" name="product_rate[]" value="" class="form-control form-control-sm border-0" placeholder="0.00">
        </td>
        <td class="p-0">
            <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">
        </td>
    </tr>
</template>
<script>
export default {
    props: ['row'],
    data() {
        return {
            slabs: [0, 0.25, 3, 5, 12, 18, 28],
        }
    },

    mounted() {}
}
</script>

但v-bind:value="row.qty * row.rate"的值未获得更新。

这就是我使用这个组件的方式：

<tbody>
       <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)"></tr>
</tbody>
<tfoot class="hidden-print">
       <tr>
              <td class="p-0" colspan="18">
                   <a href="javascript:;" @click="_addRow()" class="p-2 mt-3" style="text-decoration:none;font-size:14px;"><i class="ion-ios-plus" style="font-size:18px;"></i> Add Line</a>
               </td>
         </tr>
 </tfoot>

App.js

....
computed: {
    invoiceRows() {
        return this.$store.state.items
    }
},

这是我管理所有共享状态的vuex：

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
})

但是，如果我从我的组件中删除v-model="row.amount"，那么它将起作用。任何人都可以帮忙，让我知道我错过了什么？