Data binding with object in grand parent component with nested setter method

Hi everyone,

I have a component structure like this:

Grandparent > Parent > Child

In Grandparent, I have a rather complex object, that is being created by a third party library.

I’m trying to bind properties of this object to form input fields in the Child component.
Additionally, I need to use a setter method, that is nested in the same object.
Getters and setters should be reactive.

Currently, I’m passing the relevant property and method of the object from Grandparent to Child as props.
I bind the property with v-model to the input and invoke the method on-change.

I’m not sure if this is the best approach, because I don’t know if the v-model setter and on-change method both get invoked.




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

Parent component just passes these props further down to Child, so I omit the code here


  <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>

props: {
  position: Object,
  setPosition: Function

Is there any better approach to this?