Nuxt 3 模态/道具未正确更新

Question

我有一个模态组件，它需要一个道具来显示模态我也有模态发出关闭功能。一切正常，直到我更改页面路由并返回到包含模态的页面。由于某种原因，它不会再次显示，即使道具值看起来在 vue 开发工具中更新。

页面上的模态：

<script setup>
const subgroupModal = ref(false);

    const toggleModal = () => {
      subgroupModal.value = !subgroupModal.value;
    };
    
    const closeModal = () => {
      subgroupModal.value = false;
    };
    </script>


<template>

                  <button
                    @click="toggleModal"
                  >
                    <el-icon :size="30">
                      <el-icon-circle-plus-filled
                        class="relative text-orange top-[1px]"
                      />
                    </el-icon>
                  </button>

     <ContentModal @close-modal="closeModal" :modalActive="subgroupModal"
            >modal content</ContentModal>
 </template>

模态组件

<script setup>
  const props = defineProps({
    modalActive: {
      type: Boolean,
      required: true
    }
  });

  const emit = defineEmits(['closeModal']);
  const close = () => {
    emit('closeModal');
  };
</script>

<template>
  <Teleport to="body">
    <Transition
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
      enter-active-class="transition duration-300"
      leave-active-class="transition duration-300"
    >
      <div
        v-if="modalActive"
        class="fixed z-50 flex items-start justify-center w-full h-full bg-black bg-opacity-60"
      >
        <div
          class="flex bg-white flex-col absolute top-[10%] md:top-[20%] sm:max-w-[1160px] w-[calc(100%-2.25rem)] pb-8 md:pb-12"
        >
          <div class="flex justify-end pt-3 pr-3 mb-3 md:mb-8">
            <button type="button"  @click="close">
              <el-icon :size="55">
                <el-icon-close-bold class="text-orange" />
              </el-icon>
            </button>
          </div>
          <slot></slot>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>