Você precisa entender, a hierarquia de componentes que você está tendo e como está passando os adereços. Definitivamente, seu caso é especial e geralmente não é encontrado pelos desenvolvedores.
Componente pai -myProp-> Componente filho -myProp-> Componente neto
Se myProp for alterado no componente pai, ele será refletido no componente filho.
E se myProp for alterado no componente filho, será refletido no componente neto.
Portanto, se myProp for alterado no componente pai, ele será refletido no componente neto. (Por enquanto, tudo bem).
Portanto, na hierarquia em que você não precisa fazer nada, os objetos serão inerentemente reativos.
Agora falando sobre subir na hierarquia
Se myProp for alterado no componente grandChild, não será refletido no componente filho. Você precisa usar o modificador .sync no filho e emitir um evento do componente grandChild.
Se myProp for alterado no componente filho, ele não será refletido no componente pai. Você precisa usar o modificador .sync no pai e emitir evento do componente filho.
Se myProp for alterado no componente grandChild, ele não será refletido no componente pai (obviamente). Você deve usar o modificador .sync filho e emitir um evento do componente neto; depois, assistir o componente prop no filho e emitir um evento de alteração que está sendo escutado pelo componente pai usando o modificador .sync.
Vamos ver algum código para evitar confusão
Parent.vue
<template>
<div>
<child :myProp.sync="myProp"></child>
<input v-model="myProp"/>
<p>{{myProp}}</p>
</div>
</template>
<script>
import child from './Child.vue'
export default{
data(){
return{
myProp:"hello"
}
},
components:{
child
}
}
</script>
<style scoped>
</style>
Child.vue
<template>
<div> <grand-child :myProp.sync="myProp"></grand-child>
<p>{{myProp}}</p>
</div>
</template>
<script>
import grandChild from './Grandchild.vue'
export default{
components:{
grandChild
},
props:['myProp'],
watch:{
'myProp'(){
this.$emit('update:myProp',this.myProp)
}
}
}
</script>
<style>
</style>
Grandchild.vue
<template>
<div><p>{{myProp}}</p>
<input v-model="myProp" @input="changed"/>
</div>
</template>
<script>
export default{
props:['myProp'],
methods:{
changed(event){
this.$emit('update:myProp',this.myProp)
}
}
}
</script>
<style>
</style>
Mas depois disso você não deixará de notar os gritos avisos do vue dizendo
'Evite alterar um suporte diretamente, pois o valor será substituído sempre que o componente pai for renderizado novamente.'
Novamente, como mencionei anteriormente, a maioria dos desenvolvedores não encontra esse problema, porque é um anti-padrão. É por isso que você recebe esse aviso.
Mas, para resolver seu problema (de acordo com o seu design). Eu acredito que você precisa fazer o trabalho acima (hackear para ser honesto). Eu ainda recomendo que você repense o seu design e faça com que seja menos propenso a erros.
Espero que ajude.