title: Vuex: [vuex] module namespace not found in mapState() | mapGetters(): X/
body: <p>Following from the Vuex documentation for organising the store modularly (<a href="https://vuex.vuejs.org/guide/modules.html" rel="noreferrer">https://vuex.vuejs.org/guide/modules.html</a>), I have the following in:</p>
  
  <p><code>store/index.js</code>:</p>
  
  <pre><code>import Vue from "vue";
  import Vuex from "vuex";
  
  Vue.use(Vuex);
  
  // Default Store State for the Hug Employee Dashboard:
  // import defaultState from "@/store/defaultStore";
  
  /*eslint no-param-reassign: ["error", { "props": false }]*/
  /*eslint indent: ["error", 2]*/
  /*eslint arrow-body-style: ["error", "always"]*/
  /*eslint-env es6*/
  
  const surfGroups = {
    state: {
      activeSurfGroup: {},
      fetchingSurfGroupLoading: false,
      creatingSurfGroupLoading: false
    },
    getters: {
      activeSurfGroup: state =&gt; {
        return state.activeSurfGroup;
      },
    },
    mutations: {
      // API Request Mutations:
      SET_ACTIVE_SURF_GROUP(state, payload) {
        this.activeSurfGroup = payload;
      },
      // Loading Mutations:
      SET_FETCHING_SURF_GROUP_LOADING(state, payload) {
        state.fetchingSurfGroupLoading = payload;
      },
      SET_CREATING_SURF_GROUP_LOADING(state, payload) {
        state.creatingSurfGroupsLoading = payload;
      }
    },
    actions: {
      fetchSurfGroup: async ({ commit }, payload) =&gt; {
        commit("SET_FETCHING_SURF_GROUP_LOADING", true);
        // Dispatches the following Surf Levels API service:
        // this.$surfLevelsAPI.fetchActiveSurfGroup(
        //   payload.activeSurfGroupUUID
        // );
        await Vue.prototype.$surfLevelsAPI.fetchActiveSurfGroup(payload).then((response) =&gt; {
          if (response.success) {
            commit("SET_ACTIVE_SURF_GROUP", response.data);
            commit("SET_FETCHING_SURF_GROUP_LOADING", false);
          }
        });
      },
      createSurfGroup: async ({ commit }, payload) =&gt; {
        commit("SET_CREATING_SURF_GROUP_LOADING", true);
        // Dispatches the following Surf Levels API service:
        // this.$surfLevelsAPI.createNewSurfGroup(
        //   payload.activeSurfInstructor, payload.activeSurfSessionSelected, payload.activeGroupSurfers
        // );
        await Vue.prototype.$surfLevelsAPI.createNewSurfGroup(payload).then((response) =&gt; {
          if (response.success) {
            commit("SET_CREATING_SURF_GROUP_LOADING", false);
          }
        });
      }
    }
  };
  
  export default new Vuex.Store({
    modules: {
      surfGroups: surfGroups
    }
  });
  </code></pre>
  
  <p>I feel like this all looks good.</p>
  
  <p>However, within <code>component.Vue</code>, when I ...mapState as:</p>
  
  <pre><code>import { mapState } from 'vuex';
  
  export default {
    name: "MyComponent",
    // Computed Properties:
    computed: {
      ...mapState('surfGroups', [
        'creatingSurfGroupLoading',
      ]),
    },
    // Component Watchers:
    watch: {
      creatingSurfGroupLoading() {
        console.log(this.creatingSurfGroupLoading);
      },
    },
  };
  </code></pre>
  
  <p>I receive the following error:</p>
  
  <p><code>[vuex] module namespace not found in mapState(): surfGroups/</code></p>
  
  <p>What exactly have I done wrong? I can see any obvious descrepancies from reading through the docs?</p>