Vue.js - BootstrapVue でタブ切り替えが動作しない

質問内容

Vue.js で作成中のアプリに BootstrapVue を導入し、タブを利用したコンテンツを使えるようにしたいです。
現状は、タブ自体は表示されるのですが、違うタブをクリックしても切り替わりません。

通常の Bootstrap を使う場合は Jquery を使えるようにしないと動作しないかと思いますが、BootstrapVue の場合は「Jquery は不要」とドキュメントに書いてあるのですが、以下の手順で導入しても、タブ切り替えが動作しませんでした。

Getting Started | BootstrapVue

jQuery is not required

タブ切り替えが動作するようにするにはどうすればいいでしょうか？
よろしくおねがいします。

環境

Vue.js 2
vue-cli 2.9.6
Bootstrap 4

再現手順

bash
1vue create vue_sample
2cd vue_sample
3npm install bootstrap-vue
4npm run serve

上記コマンドで作成された雛形のうち、main.js と App.vue のみを以下のように修正しました。

main.js

js
1import "bootstrap/dist/css/bootstrap.css";
2import "bootstrap-vue/dist/bootstrap-vue.css";
3
4import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
5
6import App from "./App.vue";
7import Vue from "vue";
8
9Vue.use(BootstrapVue);
10Vue.use(BootstrapVueIcons);
11
12Vue.config.productionTip = false;
13
14new Vue({
15  render: h => h(App)
16}).$mount("#app");

App.vue

vue
1<template>
2  <div id="app">
3    <!-- タブのヘッダー -->
4    <ul class="nav nav-tabs">
5      <li class="nav-item">
6        <a href="#tab1" class="nav-link active" data-toggle="tab">タブ1</a>
7      </li>
8      <li class="nav-item">
9        <a href="#tab2" class="nav-link" data-toggle="tab">タブ2</a>
10      </li>
11    </ul>
12
13    <!-- タブのコンテンツ -->
14    <div class="tab-content">
15      <div id="tab1" class="tab-pane active">タブ1のコンテンツ</div>
16      <div id="tab2" class="tab-pane">タブ2のコンテンツ</div>
17    </div>
18  </div>
19</template>
20
21<script>
22export default {
23  name: "App",
24};
25</script>

ちなみに通常の Bootstrap を使う場合は Jquery も使えるようにすると動作しました。

html
1<!DOCTYPE html>
2
3<head>
4    <meta charset="utf-8" />
5    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
6    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
7    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
8</head>
9
10<body>
11    <!-- タブのヘッダー -->
12    <ul class="nav nav-tabs">
13        <li class="nav-item">
14            <a href="#tab1" class="nav-link active" data-toggle="tab">タブ1</a>
15        </li>
16        <li class="nav-item">
17            <a href="#tab2" class="nav-link" data-toggle="tab">タブ2</a>
18        </li>
19    </ul>
20
21    <!-- タブのコンテンツ -->
22    <div class="tab-content">
23        <div id="tab1" class="tab-pane active">タブ1のコンテンツ</div>
24        <div id="tab2" class="tab-pane">タブ2のコンテンツ</div>
25    </div>
26    </div>
27</body>
28
29</html>

解決方法

以下のように修正したところ、動作しました。

App.vue

<template>
  <div id="app">
    <div>
      <b-tabs content-class="mt-3">
        <b-tab title="First" active><p>I'm the first tab</p></b-tab>
        <b-tab title="Second"><p>I'm the second tab</p></b-tab>
        <b-tab title="Disabled" disabled><p>I'm a disabled tab!</p></b-tab>
      </b-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>