Vuex with Nuxt Error: this.$store is undefined

Question

I'm coding along with a Nuxt course and I got the following error while of course it worked in the tutorial.

TypeError: can't access property "dispatch", this.$store is undefined

store/index.js file:

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: { loadedPosts: [] },

    mutations: {
      setPosts(state, posts) {
        state.loadedPosts = posts;
      },
    },

    actions: {
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      },
    },

    getters: {
      loadedPosts(state) {
        console.log("imhere");
        return state.loadedPosts;
      },
    },
  });
};

export default createStore;

the script in posts/index.vue file:

<script>
export default {
  data() {
    return {
      loadedPosts: [{id: "1",title: "First Post"}],
    };
  },

  created() {
    this.$store.dispatch("setPosts", this.loadedPosts);
  },
};
</script>