Vue js: ошибка в созданном хуке: TypeError: невозможно прочитать свойство 'dispatch' неопределенного

Я получаю упомянутую ошибку в моем обучающем приложении, которое пишу, а также эту ошибку Error in render: "TypeError: Cannot read property 'getters' of undefined", мои коды приведены ниже

Я убедился, что все импортировано правильно, но по-прежнему получаю эту ошибку, я что-то упустил?

Main.js

   import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import { routes } from './routes.js';
import { store } from './store/store.js';

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
});

App.vue

<template>
  <div class="container">
    <app-Header></app-Header>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import store from "./store/store.js";
export default {
  created() {
    this.$store.dispatch("initStocks");
  },
  components: {
    appHeader: Header
  }
};
</script>

<style></style>