In Vue - how can I trigger a broadcast to pick up event in a different control? - vuejs2

Question

I have a component for steps, and I need to trigger an event in my steps component when I click on the next button.
This event should be picked up by a different component, that is representing the content of the page in the current step.
This is what I have tried:
Steps component template:
<template>
<div class="steps">
<div class="steps-content">
<section class="steps-panel" v-for="(stepPage, index) in steps">
<header class="posA wrap pTs">{{$t(title)}}</header>
<component :is="stepPage">
<!-- Summary component is injected here -->
</component>
</section>
</div>
<div role="navigation">
<ol class="fixed nav nav--block steps-nav w100">
<li class="steps-label txtCap" v-for="(stepPage, index) in steps">
{{$t(stepPage.name)}}
</li>
</ol>
<button class="steps-button" type="button">
<i class="pf pf-arrow-left"></i>
<span class="steps-button-label">{{$tc('previous')}}</span>
</button>
<button class="steps-button" type="button" v-on:click="next">
<span class="steps-button-label">{{$tc('next')}}</span>
<i class="pf pf-arrow-right"></i>
</button>
</div>
</div>
</template>
Steps component method:
methods: {
next(event) {
console.log('emit stepnext')
this.$emit('stepnext')
}
}
I call this with v-on:click="next" in the steps template (on the 'next' button)
From the console.log, I see that the click event is executed, and the $emit call does not trigger any error, so it seems to work fine at this point.
Summary component
The summary component is one of the components in `steps', and is loaded by this entry in the Steps template:
<component :is="stepPage"></component>
In the Summary component that knows what to do when this is clicked, I try to pick up on this event by having this in the template:
<div class="wrap" v-on:stepnext="stepfinish">
... content ...
</div>
... and a method in the summary component named stepfinish that does the action, but it seems like the emitted event never reaches my summary component.
How can I solve this?

Answer 1

A simple solution when using $root:
// trigger
this.$root.$emit('my-event');
// listen
this.$root.$on('my-event');

Answer 2

I think you are looking for the event bus
Here is some snippet from the official docs:
var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
// ...
})
link: https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Here is a blog on the same: https://alligator.io/vuejs/global-event-bus/

Answer 3

If you totally want to decouple your components, or you want to communicate across Vue "apps" and/or different frameworks (React, ...), then you can also use the DOM Native events:
document.dispatchEvent(
new CustomEvent("myapp:someClick", {
detail: {
id: 1,
someMoreCustomPayload: "bar",
},
})
)
And on the receiver's side:
document.addEventListener("myapp:someClick", (ev) => {
const { id, someMoreCustomPayload } = ev.detail
...
})
IE11 can also handle CustomEvents but apparently has no support for detail, but can be polyfilled.