Communicate between nested recursive components

I have nested recursive components:
Dom -> comp1 -> compa -> compb -> compa -> compb .....
I m confused on the best way to communicate between these components.
I know we use props to pass down data from parent to child and $emit to pass data from child to parent.
For now I pass data from comp1 to compa ,from compa to compb and from compb to compa using props.
I watch for props in compa and compb and populate data locally.
I make changes and emit events from compa to comp1 and compb and from compb to compa.

Is there a better way?(to avoid duplication and better speed)
I read so many articles but I still dont know the right way

I greatly appreciate any help and direction.

If you want to pass the props from parent to a grand children directly, you can use provide/inject / vuex store.

If you want the parent to listen to the emitted events of the grand children directly, you can use EventBus.

But if performance is not really a concern, it’s still better to keep the bypassing with props and emit properly.