Vue JS access objects of "parent component's sibling component"

Question

I have the following component structure:

SideHead component has a method, in that method I want to access objects of Incidents and call some function on them.

In short from a method in "A" i want access objects of "B" and call their method.

I think emitting an event and somehow propagating it might help but I couldn't wire it to work. Any ideas?

Answer 1

Use state management such as Vuex to communicate between non parent-child components.

Emitting events to $root or an event bus is unreliable (prone to race conditions) and difficult to debug - event captures will "fail" silently. ie you will never be informed that an event hasn't been captured.

Answer 2

1) You must add a ref tag for every compononent. <app ref="App"> , <index ref="Index"> , <incidents ref="Incidents"> , <incident-by-prio ref="IncidentByPrio">

And call it from root A component like this way:

this.$root.$refs.App.$refs.Index.$refs.Incidents.$refs.IncidentsByPrio.SomeMethod()

Edit 1:

2) Emit an event from the Component A on the root.

Component A

this.$root.$emit('SomeEvent', {...});

Catch this event in your target component:

this.$root.$on('SomeEvent', () => {...});