title: Vue 2 + Bootstrap-vue - dynamic attribute
body: <p>this is my first steps in <strong>Vue 2</strong> + <strong>bootstrap-vue</strong>, 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.</p>
  
  <p>JS code below works fine, but tooltip not changing his position =(
  Please help me improve my mistake;</p>
  
  <p><strong>.pug</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zD4V8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zD4V8.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/RWGTk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RWGTk.png" alt="enter image description here"></a></p>
  
  <p><strong>JS</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>'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 &gt;= 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 &gt;= 480 ? \'left\' : \'bottom\'', this.windowWidth &gt;= 480 ? 'left' : 'bottom', '\n', this.windowWidth);
              }
          },
          beforeDestroy() {
              window.removeEventListener('resize', this.getWindowWidth);
          }
      });
  });
  </code></pre>
  
  <p><strong>Browser - Chrome</strong></p>
  
  <p><a href="https://i.stack.imgur.com/PrcWL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PrcWL.png" alt="enter image description here"></a></p>
  
  <p><strong>Browser console - Chrome</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XsNMz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XsNMz.png" alt="enter image description here"></a></p>