For anyone who doesn't want to chain event emitting, there is a parent object on the child object which can also be used to emit events. Be sure to register the launch in the parent to avoid warnings in the console.

Subitems

Call the direct parent's$emithere.

Child.vue

export default { methods: { handleInput(e) { this.$parent.$emit('custom-event', e.target.value) } } }

Father

Since it is the parent that signals the ancestor, declare the emission here. For, just use thedefineEmits()method to declare emits. SeeDocumentation.

Parent.vue

export default { emits: ['custom-event'] // Register the emits }

If using

grandparents

Then listen to the event in the grandparent component.

GrandParent.vue

This is how I do it:codesandbox

Emits accepts only two parameters, the emitted name and the emitted value. If multiple values are emitted, they must be emitted as a single object. In my solution, the grandchild component emits the field name and value as a single object

grandson

onInput(field, value) { this.$emit("update-field", { field: field, value: value }); },

The child object captures and re-eits,butfirst takes care to emit in the format expected by the parent component (it requires the entiredata.primaryobject because that's what is set to the v model )

child

UpdateField({ field, value }) { const newVal = this.modelValue; newVal.personalInformation[field] = value; this.$emit("update:modelValue", newVal); }

Then the parent component will automatically receive and update the v-modeldata.primaryobject.

Or, I must mention that you can always usePinia, the official state management library for Vue (to save some state in one component and read the same from any other component status). There's certainly a learning curve, but it's definitely worth learning and is designed to simplify this type of situation.