vue eventbus - $on wont trigger the bus

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?

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