数据链时子组件不更新 - 为什么：键需要是更改的值？

Question

我有一个像这样的表格行：

   <tr v-for="(pricing, idx) in pricings"">
     <td>{{pricing.description}}</td>
     <td>$ {{pricing.unconfirmed_price_formatted}}
   </tr>

我想将此表格行迁移到组件。但是，当我更改基础数据（this.pricings）时，子组件不会更新。我这样称呼它：

   <pricing-row v-for="(pricing, idx) in pricings" :key="pricing.id + pricing.description" :pricing=pricing v-on:updateAfterSave="savedData" v-on:showModal="showAddEditModal"></pricing-row>

奇怪的是底层数组正在发生变化 - 只是这个组件没有正确更新。

同样清楚的是，如果我们使用key更改的值（在这种情况下为unconfirmed_price_formatted），它会更新。

我对这种行为感到有点困惑。关于什么是错的任何想法？

编辑1

这是组件：

<template>
  <tr>
    <td>{{localPricing.description}}</td>
    <td v-if="localPricing.price">$ {{localPricing.price_formatted}} {{localPricing.units_display}}</td>
    <td v-else>&nbsp;</td>
    <td v-if="localPricing.unconfirmed_price">$ {{localPricing.unconfirmed_price_formatted}} {{localPricing.unconfirmed_units_display}}</td>
    <td v-else>&nbsp;</td>
    <td v-if="localPricing.state != 'deleted'">
      <!-- button class="btn btn-outline-secondary" @click="willShowModalWithBattery(pricing)">edit</button -->
      <button class="btn btn-outline-secondary" @click="showModal(pricing)">edit</button>
    </td>
    <td v-else>&nbsp;</td>
  </tr>
</template>
<script>
export default {
  props: ['pricing'],
  data: function(){
    return {
      localPricing: this.pricing
    }
  },
  methods:{
    showModal: function(pricing){
      this.$emit('showModal', pricing);
    }

  }
}
</script>