Почему некорректно работает компонент Navs (Bootstrap 4) в связке с Vue.js?

Во Vue компоненте есть массив pages, каждый элемент которого представляет из себя хеш.

Список табов отображаю так:

<ul class="nav nav-tabs card-header-tabs" role="tablist">
    <li v-for="(page, index) in pages" class="nav-item">
        <a :class="{ 'nav-link': true, 'active': index == 0 }" data-toggle="tab" :href="'#page' + page.id" role="tab">Page #{{index + 1}}</a>
    </li>
</ul>

На этом этапе все работает.

Следующим шагом необходимо реализовать соответствующий каждому табу контент. Я это делаю так:

<div v-for="(page, index) in pages" :id="'page' + page.id" :class="{ 'nav-pane': true, 'active': index == 0 }" role="tabpanel">
    {{index + 1}}
</div>

И это работает неправильно.

Например, у меня 3 страницы, то есть три таба и три соответствующих контента. При нормальном раскладе я должен получить следующее:

• Вкладка Page #1 имеет в контенте цифру 1
• Вкладка Page #2 имеет в контенте цифру 2
• Вкладка Page #3 имеет в контенте цифру 3

В результате же каждый таб имеет список всех index + 1. Притом каждая цифра на новой строке, так как она "упакована" в:

<div class="tab-pane" id="page533" role="tabpanel">2</div>

Вообще сгенерированный код выглядит так:

<div class="card">
    <div class="card-header">
        <ul role="tablist" class="nav nav-tabs card-header-tabs">
            <li class="nav-item"><a data-toggle="tab" href="#page532" role="tab" class="nav-link active">Page #1</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#page533" role="tab" class="nav-link">Page #2</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#page534" role="tab" class="nav-link">Page #3</a></li>
        </ul>
    </div>
    <div class="card-block">
        <div class="tab-content">
            <div id="page532" role="tabpanel" aria-expanded="false" class="nav-pane active">
                1
            </div>
            <div id="page533" role="tabpanel" aria-expanded="false" class="nav-pane">
                2
            </div>
            <div id="page534" role="tabpanel" aria-expanded="false" class="nav-pane">
                3
            </div>
        </div>
    </div>
</div>

При смене таба класс active у контента меняется.

Притом если заменить Vue цикл у контента на простой HTML код:

<div class="tab-pane active" id="page532" role="tabpanel">1</div>
<div class="tab-pane" id="page533" role="tabpanel">2</div>
<div class="tab-pane" id="page534" role="tabpanel">3</div>

То все будет работать.

Предполагаю, что моя реализация - асинхронна. И JS библиотека от Bootstrap 4 просто не видит список контента, которому судя по всему этой библиотеке нужно что-то "подцепить".

Как это исправить подскажите, пожалуйста?