Bootstrap 5 - 以编程方式打开导航选项卡

Question

我在 vue 项目中使用 bootstrap 5。我创建了一个组件，它有两个导航选项卡来显示一些内容，如果用户执行操作，我需要显示第二个选项卡。我使用数据属性来触发普通选项卡可视化，但我想在用户操作后以编程方式显示第二个选项卡。谁能帮我？我尝试过这段代码但没有成功

    <nav class="nav mt-2 mb-2" role="tablist">
      <a class="nav-link active p-0 pr-2" role="tab" href="#program-tab" data-toggle="tab">Info</a>
      <a class="nav-link p-0 pr-2" role="tab" href="#download-tab" data-toggle="tab">Downloads</a>
    </nav>

<div class="row tab-pane fade m-0" id="download-tab" role="tabpanel" ref="downloadTab">...</div>

import { Tab } from 'bootstrap/dist/js/bootstrap.min.js'

data() {
  return {
    tab: null
  }
},
methods: {
  openTab() {
    this.tab = new Tab()
    console.log(this.tab)
    this.tab.getInstance(this.$refs.downloadTab).show()
  }
}