Why does using v-if break my event bus?

I have a plugin component which is made of multiple Vue components, all of which import a common Event Bus (an instance of Vue) from the same .js file.

All event bus listeners are defined in the mounted function of each component.

At the top level of my plugin component I use v-if to conditionally load different vue components, when the user switches layout.

The first time the user switches layouts, and v-if causes a load of different components, the event bus events still fire and are received by the various components. The second time they switch layouts, and subsequently, the event bus events are no longer received.

Is there any reason why switching modules with v-if would break the event bus? Each newly loaded component should load the same EventBus instance, so why aren’t the events recognised when they are fired?

P.S. I use vuex when I can, but it is not viable this context. I also posted a similar question recently, but the solution I found before, which avoided the use of v-if, is not viable.

Finally figured this out. In some of the individual components loaded inside of v-if statements, I was killing all the EventBus events in beforeDestroy, instead of just removing the individual events relevant to that component. I.e.


instead of


Over zealous