I'm using Pinia for state management in a Vue 2 application, and when I start the dev server and visit localhost:8080 I get the following error:

[Vue warn]: Error in render: "TypeError: this.IssueStore is undefined"

found in

---> <ATable> at src/components/AlertTable/main.vue
       <Inbox> at src/views/AlertInbox.vue
         <MMApp> at src/components/App/main.vue
           <App> at src/App.vue
             <Root>

Followed by a console log: 🍍 "IssueStore" store installed

So it seems like the component is using the store before Pinia is ready. If I then make an update to a component within the project, which triggers the dev server to recompile, everything works as expected.

Here is the store - some code has been removed:

export const useIssueStore = defineStore('IssueStore', {
  state: () => {
    return {
      issues: [],
    };
  },
  getters: {
    ...
    }
  },
  actions: {
    ...
  }
});

Here is the component that throws the error:

<template>
  <Table :columns="columns" :rows="getIssues" :selectable="true" />
</template>
     
<script>
import { useIssueStore } from '@/stores/IssueStore';
import { mapStores } from 'pinia'
import { Table } from '@/components';
          
export default {
  name: 'ATable',
  components: {
    Table
  },
  data() {
    return {
      columns: [],
    }
  },
  computed: {
    ...mapStores(useIssueStore),
    getIssues() {
      return this.IssueStore.filteredIssues;
    }
  },
}
</script>

This is main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia, PiniaVuePlugin, setMapStoreSuffix } from "pinia";

import VueCompositionAPI from "@vue/composition-api";
Vue.config.productionTip = false;

Vue.use(PiniaVuePlugin);
const pinia = createPinia();
setMapStoreSuffix('');

Vue.use(VueCompositionAPI);

new Vue({
  pinia,
  router,
  render: (h) => h(App),
}).$mount("#app");

Any thoughts on what may be causing this?