Cannot access state of vuex module - vue.js

Question

This is my first project with Vue and I am having some trouble accessing state of vuex module.
I am currently using quasar.
Here is my code calling the state.
mounted() {
console.log("Connected", this.$store.hasModule("module"));
console.log("Module: ", this.$store.state.module);
console.log("State: ", this.$store.state.module.count)
console.log("Map State: ", this.count);
},
computed: {
// look up in `some/nested/module`
...mapState({
count: state => state.module.count // Uses the state of the module
})
},
And here is the output I am getting
Console output
Connected true
OverviewPage.vue?1b50:26 Module: Object
OverviewPage.vue?1b50:27 State: undefined
OverviewPage.vue?1b50:28 Map State: undefined
Here are my vuex codes.
This is index of the base vuex(where vuex is put).
import Vue from "vue";
import Vuex from "vuex";
// import example from './module-example'
Vue.use(Vuex);
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default function(/* { ssrContext } */) {
const Store = new Vuex.Store({
modules: {
module: () => import("src/store/module-example/index.js")
},
// enable strict mode (adds overhead!)
// for dev mode only
strict: process.env.DEBUGGING
});
return Store;
}
This is the index inside my 'module' folder
import state from "./state";
import * as getters from "./getters";
import * as mutations from "./mutations";
import * as actions from "./actions";
export default {
namespaced: true,
getters,
mutations,
actions,
state
};
And this is my state file inside that module.
export default function() {
return {
count: 0
};
}
I have never used vuex before so, I am not really sure where I am getting this wrong.
If you have any solutions or advices for this, I would very much appreciate it! :)
Thanks ahead!