Nuxt-UI：嵌套模态框中Select Menu组件无法正常工作

我在使用Nuxt-UI的select-menu组件时遇到问题——将它置于嵌套模态框中时，无法按预期运行。我已创建演示示例用于复现该问题。

以下是Sample.vue的代码示例：

<script setup lang="ts">
import { ref } from 'vue'

const people = [
  { label: 'Wade Cooper', value: 'Wade Cooper' },
  { label: 'Arlene Mccoy', value: 'Arlene Mccoy' },
  { label: 'Devon Webb', value: 'Devon Webb' },
  { label: 'Tom Cook', value: 'Tom Cook' },
  { label: 'Tanya Fox', value: 'Tanya Fox' },
  { label: 'Hellen Schmidt', value: 'Hellen Schmidt' },
  { label: 'Caroline Schultz', value: 'Caroline Schultz' },
  { label: 'Mason Heaney', value: 'Mason Heaney' },
  { label: 'Claudie Smitham', value: 'Claudie Smitham' },
  { label: 'Emil Schaefer', value: 'Emil Schaefer' }
]

const selectedMain = ref(people[0])
const selectedFirstModal = ref(people[0])
const selectedSecondModal = ref(people[0])
const openFirstModal = ref(false)
const openSecondModal = ref(false)
</script>

<template>
  <div class="flex flex-col items-center p-8 space-y-8">
    <!-- Main Select Menu -->
    <div class="w-80">
      <h2 class="text-lg font-semibold mb-2">Main Select Menu</h2>
      <u-select-menu v-model="selectedMain" :options="people" placeholder="Select a person" />
    </div>

    <!-- Trigger for First Modal -->
    <u-button class="px-4 py-2 bg-blue-500 text-white rounded" @click="openFirstModal = true">
      Open First Modal
    </u-button>

    <!-- First Modal -->
    <u-modal v-model="openFirstModal"  :ui="{width: 'sm:max-w-5xl'}" :prevent-close="true">
      <template #title>
        <h3 class="text-xl font-semibold">First Modal</h3>
      </template>
      <template #default>
        <div class="space-y-4">
          <p class="text-gray-700">This is the first modal. You can open a nested modal from here.</p>
          
          <!-- Select Menu in First Modal -->
          <div class="w-80">
            <h4 class="text-lg font-medium mb-2">Select Menu in First Modal</h4>
            <u-select-menu v-model="selectedFirstModal" :options="people" placeholder="Select a person" />
          </div>

          <div class="flex space-x-4">
            <u-button @click="openSecondModal = true" class="px-4 py-2 bg-green-500 text-white rounded">
              Open Nested Modal
            </u-button>
            <u-button @click="openFirstModal = false" class="px-4 py-2 text-white underline">
              Close Modal
            </u-button>
          </div>
        </div>
      </template>
    </u-modal>

    <!-- Nested Second Modal -->
    <u-modal v-model="openSecondModal" :prevent-close="true">
      <template #title>
        <h3 class="text-xl font-semibold">Nested Modal</h3>
      </template>
      <template #default>
        <div class="space-y-4">
          <p class="text-gray-700">This is the nested modal with a separate select menu.</p>

          <!-- Select Menu in Nested Modal -->
          <div class="w-80">
            <h4 class="text-lg font-medium mb-2">Select Menu in Nested Modal</h4>
            <u-select-menu v-model="selectedSecondModal" :options="people" placeholder="Select a person" />
          </div>
          
          <u-button @click="openSecondModal = false" class="px-4 py-2 text-white underline">
            Close Nested Modal
          </u-button>
        </div>
      </template>
    </u-modal>
  </div>
</template>

内容的提问来源于stack exchange，提问作者rook