我正在尝试在Vue 3项目中设置一个Ionic Auto Height Sheet模态（https：//ionicframework.com/docs/api/modal#auto-height-sheet）。下面是我的代码。
在ion-tab-button #3上，我添加了id="open-modal"。在ion-tab-button下面，我添加了一个带有trigger="open-modal"的modal。当我点击离子标签按钮#3时，我能够打开模态。但是，当我关闭模态并再次单击ion-tab-button时，模态不会重新打开。同时，我在控制台中收到以下警告：

[Ionic Warning]: A trigger element with the ID "open-modal" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on an overlay component.

我应该做些什么来确保每次单击时模式的打开和关闭都是一致的？另外，根据警告，我如何确保trigger元素是DOM的一部分？

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon aria-hidden="true" :icon="listOutline" size="large" color="primary" />
        </ion-tab-button>

        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <ion-icon aria-hidden="true" :icon="shuffleOutline" size="large" color="primary"/>
        </ion-tab-button>

        <ion-tab-button tab="tab3" id="open-modal" href="#">
          <ion-icon aria-hidden="true" :icon="menuOutline" size="large" color="primary"/>
        </ion-tab-button>

        <ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
          <div class="block">Block of Content</div>
        </ion-modal>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script setup>
import { 
  IonTabBar, 
  IonTabButton, 
  IonTabs, 
  IonIcon, 
  IonModal,
  IonPage, 
  IonRouterOutlet,
} from '@ionic/vue';
import { 
  shuffleOutline, 
  listOutline,
  menuOutline
} from 'ionicons/icons';
</script>