Javascript Vue.js：使用嵌套setter方法与grand parent组件中的对象进行数据绑定

我有这样一个组件结构：

祖父母

父母

子女

在《祖父母》中，我有一个相当复杂的对象，它是由第三方库创建的

我正在尝试绑定此对象的属性，以在

子组件中形成输入字段。
另外，我需要使用一个setter方法，它嵌套在同一个对象中。
接受者和接受者应该是被动的

目前，我正在将对象的相关属性和方法作为道具从
祖父母
传递到
孩子
。
我将带有v-model的属性绑定到输入，并在更改时调用该方法

我不确定这是否是最好的方法，因为我不知道v-modelsetter和on-change方法是否都被调用

代码：

祖父母：

<template>
  <Parent
    :position="complexObject.position"
    :setPosition="complexObject.setPosition"
  ></Parent>
</template>

this.complexObject.position = {
  x: 0,
  y: 0,
  z: 0
}
this.complexObject.setPosition = function(vectorPosition) {
  // ...
}

有没有更好的办法？
Cheers
您应该将表单字段绑定到子对象中的本地对象，并从道具初始化该对象。你也应该在道具上有一个深度观察者，以便在道具改变时更新你在Child中的本地对象。当您完成表单编辑时-您的孩子应该向祖父母发出一个带有新表单值的事件，祖父母应该使用其setter更新对象-然后新对象将自动传播到孩子。它可以工作。非常感谢。您应该将表单字段绑定到子对象中的本地对象，并从prop初始化该对象。你也应该在道具上有一个深度观察者，以便在道具改变时更新你在Child中的本地对象。当您完成表单编辑时-您的孩子应该向祖父母发出一个带有新表单值的事件，祖父母应该使用其setter更新对象-然后新对象将自动传播到孩子。它可以工作。非常感谢。
<template>
  <b-form-input type="number" v-model.number="position.x" @change="setPosition($event)"></b-form-input>

  <b-form-input type="number" v-model.number="position.y" @change="setPosition($event)"></b-form-input>

  <b-form-input type="number" v-model.number="position.z" @change="setPosition($event)"></b-form-input>
</template>

props: {
  position: Object,
  setPosition: Function
}