How to pass data between vue components

Question

This is regarding Vuex and passing of data from one component to another. I want the Module variable within CoreMods.vue to be passed to the ExternalWebpage.vue. Or rather, be watched in the external webpage for changes.

My store.js looks like this:

    import Vue from 'vue';
    import Vuex from 'vuex';

    Vue.use(Vuex);

    export default new Vuex.store({
        state:{
             CoreModule: ""
      },  
        mutations:{
             update: (state, n) => {
                state.CoreModule = n;
            }
         },

        getters:{
             updated: state =>{
                return state.CoreModule;
                    }
              },

        actions:{
              async createChange({ commit }, n) {
                commit("update", n);
                 }
            }
       });

I have a CoreMods.vue

    methods:{
        checkModule() {      
          if(!this.completed_cm.includes(this.Module)) {
               if (this.core.includes(this.Module)) {
                  this.completed_cm.push(this.Module);
                  this.$store.dispatch('createChange',this.Module);
  }
}, 

An ExternalWebpage.vue

     watch:{
         '$store.state.CoreModule': function(){
              var cm = this.$store.getters.updated;
              if(this.CompletedCore.indexOf(cm) == -1){
              this.CompletedCore.push(cm);
            }
          }
        }

I can't make use of props by importing one component in another. This is because: 1) I do not want the entire component placed within the parent component. 2) CoreMod is a component on the home page. Upon clicking a link on the home page, it leads to ExternalWebpage. (This has already been implemented using router)

Currently this code isn't working. Can someone help find a solution/alternative. Additionally, how should I add this part to the main.js? Thanks!!!

Answer 1

possible solution is to return vuex store value from computed and watch the computed value.

computed: {
  coreModule () {
    return this.$store.state.CoreModule;
  }
},
watch:{
  'coreModule': function(){
      var cm = this.$store.getters.updated;
      if(this.CompletedCore.indexOf(cm) == -1){
          this.CompletedCore.push(cm);
      }
  }
}