我正在将一个Vue 2应用程序迁移到Vue 3。到目前为止，它已经足够好了，除了模板没有根据Pinia状态更新。我已经看了其他与此相关的SO问题，但我不能解决这个问题。
下面是我的组件（父组件和子组件）和存储-注意，我使用的是选项API

// Parent
<template>
  <div class="wrapper">
    <ActionButtonGroup />
  </div>
</template>

<script>
import { useActionStore } from '@/stores/ActionStore';
import ActionButtonGroup from './components/ActionButtonGroup/main.vue';
export default {
  name: 'ActionsParent'
  components: {
    ActionButtonGroup,
  },
  created() {
    this.loadActions();
  },
  methods: {
    loadActions() {
      useActionStore().loadActions();
    },
  }
}

// Child
<template>
  <div class="action-buttons d--f ai--c">
      <Spinner class="ml-3" v-if="loading" />
  </div>
</template>

<script>
import { mapState } from 'pinia';
import { useActionStore } from '@/stores/ActionStore';
import { Spinner } from '@/components/index';

export default {
  name: 'ActionButtonGroup',
  components: {
    Spinner,
  },
  computed: {
    ...mapState(useActionStore, ['loading']),
  }
}
</script>

// Store
import { ActionApi } from '@/api/index';
export const useActionStore = defineStore('Action', {
  state: () => {
    return {
      loading: false,
    };
  },
  actions: {
    async loadActions() {
      this.loading = true;
      await this.fetchActions();
      this.loading = false;
    },
    async fetchActions(id) {
      const actions = await ActionApi.fetchActions();
      return actions;
    },
  }
}

我也尝试过在child中使用setup函数，但这并不能解决问题：

setup() {
    const store = useActionStore();
    const loading  = computed(() => store.loading);
    return {
      loading
    }
  },