The core part of the Vuex store is in store.js . It is as follow:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        },
        reset(state) {
            state.count = 0;
        },
        disappoint(state) {
            state.count = 9;
        }
    },
    getters: {
        getCount: state => {
            return state.count
        }
    }
})
export default store;

Then in each component, you call store.commit with the name of the function in mutations to change state.count . For example, in City.vue , I have the following methods block:

methods: {
  next() {
    store.commit("increment");
  },
disappoint() {
    store.commit("disappoint");
  }
}

These 2 functions will change state.count when called, which the latest value gets propagated back to any component that has this block:

computed: {
  count() {
    return store.state.count;
  }
}

like Home.vue . Since Home.vue is where the page components are conditionally displayed with this block:

<div v-if="continent && country && region">
      <where-continent v-if="count == 0"></where-continent>
      <continent v-if="count == 1" :continent="continent"></continent>
      <where-country v-if="count == 2"></where-country>
      <country v-if="count == 3" :country="country"></country>
      <where-region v-if="count == 4"></where-region>
      <region v-if="count == 5" :region="region"></region>
      <where-city v-if="count == 6"></where-city>
      <city v-if="count == 7" :city="city"></city>
      <win v-if="count == 8"></win>
      <disappoint v-if="count == 9"></disappoint>
    </div>

the page gets updated