Vue - How to make <b-tab> active dynamically based on external control

Question

How do I make a tab active dynamically based on which button is pressed. I'm using the <b-tabs> from bootstrap-vue. From my example code below the step variable is changed according to the button pressed, but the tabs are always active regardless.

    <template>
        <div>
            <b-tabs>
                <b-tab title="Step 1" :active="step === 1">
                   <br>step 1
                </b-tab>
                <b-tab title="Step 2" :active="step === 2">
                    <br>step 2
                </b-tab>
                <b-tab title="Step 3" :active="step === 3">
                    <br>step 3
                </b-tab>
            </b-tabs>

            <button v-on:click="step = 1">Step 1</button>
            <button v-on:click="step = 2">Step 2</button>
            <button v-on:click="step = 3">Step 3</button>

        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    step: 0,
                }
            },
            mounted() {
            },
            methods: {
            },
        }
    </script>

Answer 1

Try to use v-model as mentioned in this example instead of active prop as follows :

        <b-tabs v-model="step">
            <b-tab title="Step 1" >
               <br>step 1
            </b-tab>
            <b-tab title="Step 2" >
                <br>step 2
            </b-tab>
            <b-tab title="Step 3" >
                <br>step 3
            </b-tab>
        </b-tabs>

and your step should begin from 0

        <button v-on:click="step = 0">Step 1</button>
        <button v-on:click="step = 1">Step 2</button>
        <button v-on:click="step = 2">Step 3</button>