title: vue.js bootstrap-vue dynamically change alert variant
body: <p>So I'm using bootstrap-vue in a vue.js project, and this is the way you can display an alert acording to the docs:</p>
  
  <pre><code>&lt;b-alert variant="success" show&gt;Success Alert&lt;/b-alert&gt;
  </code></pre>
  
  <p>What I'm trying to do is </p>
  
  <pre><code>&lt;b-alert variant=alertvariant show&gt;Success Alert&lt;/b-alert&gt;
  
  //...
  
  &lt;script&gt;
  export default {
      name: 'SetPOS',
      data() {
          return {                       
              alertvariant: "warning"
          }
      },
  ...
  </code></pre>
  
  <p>But this is not working, the alert is showing up withouth style. Is there any way I can use variables in the variant property of the alert, so I can dynamically change it from code??</p>