I have created an eventBus in a plugins folder:

import Vue from 'vue'
      
const eventBus = {}
    
eventBus.install = function (Vue) {
    Vue.prototype.$bus = new Vue()
}
    
Vue.use(eventBus)

I have Updated my nuxt config file.

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '~/plugins/bus'
  ],

I have two card components on a homepage component. I want when I click the link on the card to take the user to another nuxt-linked page and set the data on that page to either true or false in the created() to conditionally render the data. I have set on the two different cards:

 <nuxt-link to="/tours-and-seminars" v-on:click="changeTourStatus">
      Click Here for More Information
    </nuxt-link>
  </div>
</template>
     <script>
export default {
  methods: {
    changeTourStatus: function () {
      this.$bus.$emit("changeTourStatus", true);
    },
  },
  name: "ToursCard",
};
</script>

The other card is the inverse of this setting it to false.

On my other page I have a simple v-if that if data: tours = true render one, if not render the other item on the page. I then have the below in the created() to change the "tours" data and then the page.

 created() {
this.$bus.$on("changeTourStatus", (data) => {
  console.log(data);
  this.tours = data;
});

}, };

I would hope loads with the the correct conditions to render either the one item or the other based on whatever the created() changes it to. But at the moment I am getting nothing show.

I am unsure if it is the bus I have added not working or if it is how I am sending the data. The console.log in the created() is returning nothing at the moment I can see in the dev tools.