Vue.js eventBus doesn't emit property after page refresh

Question

I want to pass property from one component to other, they are siblings, after a page refresh. I want to do this on the page load. I am using eventBus to do it:

EventBus.$emit('generatedSum', this.sum);

Receiving it in the sibling component with:

EventBus.$on('generatedSum', (sum) => {
      this.correct = sum;
    });

and I am puting both in the lifecycle hook:

created(){}

The problem is that after code is compiled after a saved change, I get the property emited to the sibling component, but when I manualy refresh the page the property is not visible in the sibling component.

Answer 1

I think when the page refreshes the Vue components mount one after another. Since both are siblings, when the first component trigger the event the second component may not be available to listen to the triggered event . Because the second component is mounted after the first component.

As a work around try mounted() rather than using created() life cycle event.

More on life cycle events can be found here. https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram