vue eventbus - $on wont trigger the bus - vue.js

Question

I have looked at tutorials and read the papers but I don’t get it why my setup with eventbus does not work.
In main.js
I create a new instance of Vue
/* create a eventbus*/
export const Bus = new Vue();
In page1
import { Bus } from "../main";
I then have a click event that’s triggers a method
methods: {
moveData(inValue) {
let valueToSend = inValue;
console.log("valueToSend");
console.log(valueToSend);
Bus.$emit("emitAlbumTitle", valueToSend);
},
},
And console.log tells there nothing wrong with the method moveData().
In page 2.
I try to listen to the busemit.
import { Bus } from "../main";
data() {
return {
id: this.$route.params.idAlbum,
photoData: [],
albumTitle: "",
};
},
In tried in created(), I have some other things going on there as you see, like an api-call but that should not affect this I think.
async created() {
try {
this.photoData = await CallApi.getPosts(url + this.id);
this.number = this.photoData.length;
Bus.$on("emitAlbumTitle", (data) => {
this.albumTitle = data;
console.log("in the $bus");
console.log(data);
});
} catch (err) {
this.error = err.message;
}
},
But nothing in the console.logs in the Bus.$on starts, so that eventbus never starts?
I also have tried in mounted() hook
mounted() {
Bus.$on("emitAlbumTitle", (data) => {
this.albumTitle = data;
console.log("in the $bus");
console.log(data);
});
},
But same result.
What am I missing here?

Answer 1

The problem is your Receiver component is not created until you click the link, at which point the event has already been emitted from Sender.
One solution is to delay the event emitted until the next macro tick (using setTimeout without a delay), as the Receiver component would be created in the current macro tick:
export default {
methods: {
async emitValue() {
// wait til next macro tick
await new Promise(r => setTimeout(r));
EventBus.$emit("string-send", this.sendString);
},
}
}
demo

Answer 2

Try same as this works for me. Data will show in console on button click.
Here is the main.js file.
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
export const eventBus = new Vue();
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
It is App.vue file.
<template>
<v-app>
<div id="app">
{{albumTitle}}
<br>
<button class="primary" #click="dataSend">send</button>
</div>
</v-app>
</template>
<script>
import {eventBus} from '#/main'
export default {
name: "App",
data: () => ({
albumTitle: null
}),
created(){
eventBus.$on("emitAlbumTitle", (data) => {
this.albumTitle = data;
console.log("in the $bus");
console.log(data);
});
},
methods: {
dataSend(){
eventBus.$emit("emitAlbumTitle", "some data")
}
},
};
</script>