Почему WebStorm не выводит автодополнение vue pinia?

Question

[Ваня]

Есть store и есть шаблон, там где стрелочка, WebStorm не выводит автодополнением значения store count, count_1, count_2 (после store.(их здесь нет)), но если любое дописать руками, все работает. Методы store выводит (автодополнением) такие как increment и decrease. Хотя при наводке курсором WebStorm выводит информацию, он явно знает какие переменные в store и какие значения, вопрос, как пофиксить вывод автодополнением доступных значений count, count_1, count_2?

import { defineStore } from "pinia";

export const useCounterStore = defineStore('counter', {
    state: () => {
        return {
            count: 0,
            count_1: 0,
            count_2: 50
        }
    },
    actions: {
        increment() {
            this.count++
        },
        decrease() {
            this.count--
        }
    }
})

<template>
  <div class="about">
    <h3>This is an about page</h3>
    {{ store.count_2 }} // <------------------------------------
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from "@/store/pinia/counter";
import { mapStores, storeToRefs } from 'pinia';

export default defineComponent({
  setup() {
    const store = useCounterStore()
    return { store, } 
  },
  name: 'HomeView',
  components: {},
});
</script>

Answer 1

[Ваня]

Проблема решилась добавлением гетера в store, видать я так нарушал концепцию

getters:{
      count_2: (state) => state.count_2
    },