Vue 2 + Bootstrap-vue - dynamic attribute

this is my first steps in Vue 2 + bootstrap-vue, and I'm trying to figure out how to dynamically change the name of an attribute, so that at a small screen resolution the tooltip changes its position.

JS code below works fine, but tooltip not changing his position =( Please help me improve my mistake;

.pug

JS

'use strict';

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';

document.addEventListener("DOMContentLoaded", function () {
    Vue.use(BootstrapVue);
    new Vue({
        el: '#freshbroccoli',
        data: {
            windowWidth: null,
            position: this.windowWidth >= 480 ? 'left' : 'bottom'
        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener('resize', this.getWindowWidth);
                this.getWindowWidth();
            });
        },
        methods: {
            getWindowWidth() {
                this.windowWidth = document.documentElement.clientWidth;
                console.log('this.windowWidth >= 480 ? \'left\' : \'bottom\'', this.windowWidth >= 480 ? 'left' : 'bottom', '\n', this.windowWidth);
            }
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.getWindowWidth);
        }
    });
});

Browser - Chrome

Browser console - Chrome