In the app I am developing, there is a main component that passes an Object, specifically this.form, to a child form component using v-bind:sync="form". The child form then emits values for each key of the parent object on @input events.
My goal is to be able to monitor changes to the value of this.form in the parent component. However, it appears that when using v-bind:sync, the parent object does not react to the changes made by the child component's emissions. Despite this, upon submitting an action in the parent component, I do send this.form with all the updated values received from the child component.
Here is an example of the code structure:
<ParentComponent>
<ChildComponent v-bind:sync="form"/>
{{form}} <--- this isn't updating after child component emits
<button @click="submit"> Submit actions here have access to the updated this.form... </button>
</ParentComponent>
...
data() {
return {
form: { ...some object keys}
}