title: Vue.js 3 and typescript : Property '$store' does not exist on type 'ComponentPublicInstance
body: <p>Can't find anything to solve this seemingly obvious issue.</p>
  <p>Just upgraded from Vue 2 to Vue 3 and Vuex with Typescript.</p>
  <p>this.$store doesn't seem to be accessible, despite following the Vue 3 instructions.</p>
  <blockquote>
  <p>ERROR in src/components/FlashMessages.vue:28:25
  TS2339: Property '$store' does not exist on type 'ComponentPublicInstance&lt;{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase&lt;{}, {}, {}, { getAllFlashMessages(): Word; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}&gt;&gt;'.</p>
  </blockquote>
  <pre><code>    26 |     computed: {
      27 |         getAllFlashMessages (): FlashType {
    &gt; 28 |             return this.$store.getters.getFlashMessages;
         |                         ^^^^^^
      29 |         },
      30 |     },
      31 | 
  </code></pre>
  <p>main.ts</p>
  <pre><code>import { createApp } from 'vue'
  import App from './App.vue'
  import './registerServiceWorker'
  import router from './router'
  import store from './store'
  import './assets/styles/index.css'
  
  const app = createApp(App)
  
  app.use(store)
  app.use(router)
  app.mount('#app')
  </code></pre>
  <p>store.ts</p>
  <pre><code>import { createStore } from 'vuex'
  import FlashType from '@/init'
  
  export default createStore({
      state: {
          flashMessages: [] as FlashType[],
      },
  
      getters: {
          getFlashMessages (state) {
              return state.flashMessages
          }
      },
  </code></pre>
  <p>FlashMessages.vue</p>
  <pre><code>&lt;script lang=&quot;ts&quot;&gt;
  import { defineComponent } from &quot;vue&quot;;
  import FlashType from &quot;@/init&quot;;
  
  export default defineComponent({
      name: &quot;FlashMessages&quot;,
  
      data () {
          return {};
      },
  
      computed: {
          getAllFlashMessages (): FlashType {
              return this.$store.getters.getFlashMessages;
          },
      },
  </code></pre>
  <p>init.ts</p>
  <pre><code>export type FlashType = {
      kind: 'success' | 'error';
      message: string;
      time: number;
  }
  </code></pre>
  <p>Any wisdom appreciated :)</p>
  <p>File structure</p>
  <pre><code>├── .editorconfig
  ├── client
  │   ├── babel.config.js
  │   ├── CONTRACTS.md
  │   ├── cypress.json
  │   ├── jest.config.js
  │   ├── package.json
  │   ├── package-lock.json
  │   ├── postcss.config.js
  │   ├── public
  │   │   ├── favicon.ico
  │   │   ├── index.html
  │   │   └── robots.txt
  │   ├── README.md
  │   ├── src
  │   │   ├── App.vue
  │   │   ├── assets
  │   │   │   ├── logo.png
  │   │   │   └── styles
  │   │   │       └── index.css
  │   │   ├── components
  │   │   │   ├── admin
  │   │   │   │   ├── AdminAdd.vue
  │   │   │   │   ├── AdminList.vue
  │   │   │   │   ├── AdminWord.vue
  │   │   │   │   ├── EmotionAdd.vue
  │   │   │   │   ├── EmotionsList.vue
  │   │   │   │   └── Emotion.vue
  │   │   │   └── FlashMessages.vue
  │   │   ├── init.ts
  │   │   ├── main.ts
  │   │   ├── registerServiceWorker.ts
  │   │   ├── router
  │   │   │   └── index.ts
  │   │   ├── shims-vue.d.ts
  │   │   ├── store
  │   │   │   └── index.ts
  │   │   └── views
  │   │       ├── About.vue
  │   │       ├── Admin.vue
  │   │       ├── Emotions.vue
  │   │       └── Home.vue
  │   ├── tsconfig.json
  │   └── vue.config.js
  ├
  └── server
      ├── api
      ├── api.bundle.js
      ├── index.ts
      ├── logger
      │   └── logger.ts
      ├── models
      ├── nodemon.json
      ├── package.json
      ├── package-lock.json
      ├── router
      │   ├── db.ts
      │   └── emotions.ts
      ├── tsconfig.json
      └── webpack.config.js
  </code></pre>
  <p>This is my first time properly using eslint, so I'm not sure if I've set it up correctly.. I ended up with a different tsconfig in /client and /server directories.</p>
  <p>client/tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;./&quot;,
      &quot;types&quot;: [
        &quot;webpack-env&quot;,
        &quot;jest&quot;
      ],
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;esnext&quot;,
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;scripthost&quot;
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;src/**/*.vue&quot;,
      &quot;tests/**/*.ts&quot;,
      &quot;tests/**/*.tsx&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>