Vue js, bootstrap-vue. Не работает эффект перехода в таблице

Я использую bootstrap-vue. Я взял пример из документации - https://bootstrap-vue.js.org/docs/components/table/#table-body-transition-support. Все работает хорошо. Но если я заменю данные в ячейках th своими данными, эффект перестанет работать. Почему так происходит? Как это исправить?

<template>
<div class="container">
    <div class="row">
        <div class="col-sm-12 chartjs">
            <b-table
                    id="table-transition-example"
                    :items="itemsForTable"
                    :fields="fieldsForTable"
                    striped
                    small
                    primary-key="a"
                    :tbody-transition-props="transProps"
            ></b-table>

        </div>
    </div>
</div>

<script>
export default {
    data: function () {
        return {
            fieldsForTable: [
                { key: 'a1', sortable: true },
                { key: 'b', sortable: true },

            ],
            itemsForTable: [
                { a1: 2, b: 'Two'},
                { a1: 1, b: 'Three'}
            ],
            transProps: {
                name: 'flip-list'
            }
        };
    },
    computed: {
    },
    mounted() {
    },
    methods: {
    }
}