Vue - дочерний компонент prop не обновляется после изменения на parent

Question

У меня есть компонент, скажем, «средний» с подпоркой «элемент» из компонента «верхний день» - это объект, и я использую ссылки для заполнения и обновления некоторых данных. Этот объект имеет свойства "id" и "cost". На среднем компоненте я выбрал с v-моделью для element.id.

Если пользователь изменил выбор, я проверил некоторые данные в методе среднего компонента и установил новую стоимость. И это работает нормально - если я просто использую {{element.cost}} для отображения данных, все в порядке.

Но я также отправляю этот element.cost, скажем, для «глубокого» компонента - я использую его для визуализации настраиваемого поля ввода, и эта стоимость заполняется как значение. Этот компонент использует внутренние данные для хранения и обновления модели, потому что я также использую 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, даже если я использую это. $ ForceUpdate, ввод для «deep» не обновляется. Я попытался добавить наблюдателя в модель глубокого монитора, но он не видит никаких изменений по сравнению с родительским. Что не так?