Dynamically add content to bootstrap-vue popover

Hi, I'm migrating my project from jquery + bootstrap + vuejs to only vuejs + bootstrap-vue. I used to have a few popovers within the main app and in some components. The components' have been updated properly by changing the markdown to <b-btn></b-btn><b-popover></b-popover>, however the ones in the main app are experiencing struggles with it: they used to be shown depending on a variable and the title and content is loaded via Ajax. Now with the new markdown they never get shown. Here are the old and new codes:

old file.blade.php:

<button type="button" 
    id="my_popover"
    class="btn btn-lg"
    data-toggle="popover"
    data-container="body"
    :title="my.var.name"
    :data-content="my.var.description"
    v-if="my.var.popover">
    <i class="fa fa-question-circle"></i>
</button>

old app.js

new Vue({
    data: {
        my: {
            var: {
                name: null,
                description: null,
                popover: false
            }
        }
    },
    methods(){
        myFunction(){
            let url = '/my_url';
            axios.get(url).then(response => {
                let data = response.data;
                this.my.var.title = data.title;
                this.my.var.description = data.description;
                this.setPopup('var');
            }).catch(error => {
                console.error(error);
                console.error(error.message);
            });
        },
        setPopup(v){
            this.my[v].popover = true;
            let pop = '#'+v+'_popover';
            this.$nextTick(() => {
                $(pop).popover({
                    content: 'body',
                    trigger: 'hover',
                    placement: 'right'
                });
            });
        }
    }
});

new file.blade.php:

<b-popover target="my_popover" placement="right" 
    :title="my.var.name" 
    triggers="hover" 
    ref="popover"
    content="body"
    placement="right"
    :content="my.var.description">
</b-popover>
<b-btn id="my_popover" class="btn-default" variant="default" v-if="my.var.popover">
    <i class="fa fa-question-circle"></i>
</b-btn>

new app.js

new Vue({
    data: {
        my: {
            var: {
                name: null,
                description: null,
                popover: false
            }
        }
    },
    methods(){
        myFunction(){
            let url = '/my_url';
            axios.get(url).then(response => {
                let data = response.data;
                this.my.var.title = data.title;
                this.my.var.description = data.description;
                this.setPopup('var');
            }).catch(error => {
                console.error(error);
                console.error(error.message);
            });
        },
        setPopup(v){
            this.$nextTick(() => {
                this.my[v].popover = true;
            });
        }
    }
});

The result here is nothing: the popover never appears (as for the documentation, if the content is null, the popover will not show up, which is fair, but the content is binded to a variable that actuallt changes).

Is there a way to make this work with ajax?

Thanks