I am creating a NuxtJS application that has 2 components. I want to send the data from component-1 to component-2 using the bus but for some reason, I am unable to receive the event and data in component-2.

I followed below steps:

1. create plugins folder and bus.js file and add information.
2. Add plugin within nuxt-config.js file.
3. In the method send the event:

this.$bus.$emit(
          "test-event",
          JSON.parse(JSON.stringify(this.testDataInput, null, 4))
        );

4. When I try to read that event within my created method of component2 then I do not receive anything.

 created() {
    console.log("FOUR");
    this.$bus.$on("test-event", (testData) => {
      console.log("CREATED");
      console.log(testData);
    });
  },

I am unable to get the created and testData in output. Can someone please explain to me why I am unable to read the event within create method?

I have created the sample code in Sandbox: https://codesandbox.io/s/cool-germain-1do37?file=/pages/Test.vue:90-247

Component-1 : index.vue and Component-2 : Test.vue.

When I run the application then I get the following output:

ONE 
TWO 
THREE 
FOUR 

I do not get created and testData. Can someone please let me know what am I doing wrong here: https://codesandbox.io/s/cool-germain-1do37?file=/pages/Test.vue:90-247