在我基于Vue 3的应用程序中，我面临着在异步操作后更新组件状态的挑战。情况是这样的：
在一个组件中，我有一个方法containerMoveHere，它使用www.example.com执行异步操作Socket.io，以移动一个容器，该容器被添加到显示的容器列表中。移动操作成功后，我想更新Pinia存储中的子数组，并确保组件重新呈现以反映更新后的状态。
下面是我的代码：
page.vue

<template>
...
<div class="flex justify-end space-x-2">
     <MoveToHereButton @click.prevent="containerMoveHere()" />
</div>
...
<div class="grid grid-cols-3 gap-4 py-6 place-content-stretch">
   <div v-for="child in children" :key="child._id">
      <ContainerCard :container="child" />
   </div>
</div>
...
</template>

<script setup lang="ts">

const userStore = useUserStore();
const containerStore = useContainerStore()
const container = storeToRefs(containerStore).container;
const children = storeToRefs(containerStore).visibleChildren;

async function containerMoveHere() {
  try {
    let containerStrId = await userStore.getContainerIdToMove();
    await containerStore.containerMoveHere(containerStrId)
  } catch (error) {
    console.error(error)
  }
}

</script>

这是我的店：

export const useContainerStore = defineStore('container', {
  state: () => {
    let container: iContainerAllType | undefined;
    const children: Array<{ visible: boolean; data: iContainerAllType }> = [];
    return { 
      container, children 
    };
  },
  getters: {
    visibleChildren(): Array<iContainerAllType> {
      return this.children.filter(c => c.visible).map(c => c.data);
    }
  },
  actions: {
   async containerMoveHere(sourceContainerStrId) {
      try {
        await socketioservice.emit('container:moveTo', {
          container: {
            Id: this.container?._id,
            Space: this.container?._space,
            SourceId: sourceContainerStrId 
            }
        });
      } catch (error) {
          console.error('Error moving container:', error);
        }
      },
   }

其他背景：
容器的移动成功。如果我重新加载页面，添加的容器将正确显示在子容器中。
问题是，即使children是一个React性属性，children状态也不会更新。
先谢谢你的帮助。