Vue-父组件更改后，子组件prop不会更新

Question

我有一个组件，让我们说“中间”与道具“元素”，那是我们的“顶级”组件-它是对象，我使用引用来填充和更新一些数据。该对象具有属性“ id”和“ cost”。在中间组件上，我选择了带有v-model的element.id。

如果用户更改选择，我将使用中间组件方法检查一些数据并设置新成本。而且效果很好-如果我仅使用{{element.cost}}来显示数据，一切都很好。

但是我也将这个element.cost发送给“ deep”组件-我用它来呈现自定义输入字段，并且此成本被填充为值。该组件使用内部数据来存储和更新模型，因为我也使用Cleave。

beforeMount () {
  // model is from middle (parent)
  this.value = this.model
}

观察变化：

watch: {
            value: function (newValue) {
                // here some validation
                this.$emit('input', this.value)
            }
}

它工作正常-如果我修改输入，中间元素也有此更改。

问题是当我在“中间”级别上修改element.cost时-选择更改之后。即使我使用$ this.set，即使我使用this。$ forceUpdate，“ deep”上的输入也不会更新。我试图在深色t监控器模型中添加监视程序，但看不到父控件的任何更改。怎么了？