I'm using vuex v4 with composition api. The problem is I couldn't access store states in components but I can see them in vue-devtools. When I wanna access store state it gave me undefined.

store/index.ts:

import { InjectionKey } from "vue";
import {
  createStore,
  createLogger,
  Store,
  useStore as vuexUseStore,
} from "vuex";
import { ConfigStateType } from "./config/state";
import config from "./config";

export enum ModuleTypes {
  CONFIG = "CONFIG",
}

export interface StateInterface {
  config: ConfigStateType;
}

export const key: InjectionKey<Store<StateInterface>> = Symbol();

export const store = createStore<StateInterface>({
  modules: {
    [ModuleTypes.CONFIG]: config,
  },
  strict: debug,
});

export function useStore() {
  return vuexUseStore(key);
}

vue js main.ts:

import { store, key } from "./store";

createApp(App).use(store, key).use(router).mount("#app");

In my component:

import { useStore } from "@/store";

setup() {
    const store = useStore();

   const recaptchaSiteKey = computed(
      () => store.state.config.googlerecaptcha_site_key
    );

return {
recaptchaSiteKey
}
}

always recaptchaSiteKey returns undefined, but in vue-devtools states are filled.

vuex devtool: