boostrap vue在模式下使用选项卡时，它不能正常工作

<template>
  <div>
    <b-button @click="openModal">打开模态框</b-button>
    <b-modal v-model="modalOpen" @show="loadTabs">
      <template v-slot:default>
        <component :is="currentTab"></component>
      </template>
      <b-tab title="选项卡1" :active="currentTab === 'Tab1'"></b-tab>
      <b-tab title="选项卡2" :active="currentTab === 'Tab2'"></b-tab>
      <b-tab title="选项卡3" :active="currentTab === 'Tab3'"></b-tab>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalOpen: false,
      currentTab: 'Tab1'
    };
  },
  methods: {
    openModal() {
      this.modalOpen = true;
    },
    loadTabs() {
      // 模拟延迟加载选项卡组件
      setTimeout(() => {
        this.currentTab = 'Tab1';
      }, 100);
    }
  }
};
</script>