title: Conditional rendering not work on bootstrap vue
body: <p>I set up a bootstrap table and bootstrap alert and i use bootstrap-vue plugin. I want to show alert when there is no data in my products data. </p>
  
  <p>When there is no data, table is hidden but alert is not working</p>
  
  <p>I tried v-if, v-else-if and v-else conditions on my alert but these are not working.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;b-card cols="12" class="mb-5 mt-5 shadow"
                  title="ALL PRODUCTS"&gt;
            &lt;hr&gt;
            &lt;b-card-body&gt;
              &lt;b-table hover bordered :items="items" :fields="fields" class="text-center" v-if="getProducts.length&gt;0"&gt;
                &lt;template slot="key" slot-scope="data"&gt;
                  &lt;b-badge variant="info"&gt;{{data.item.key}}&lt;/b-badge&gt;
                &lt;/template&gt;
                &lt;template slot="count" slot-scope="data"&gt;
                  &lt;span class="font-weight-bold" :class="countClasses(data.item.count)"&gt;{{data.item.count}}&lt;/span&gt;
                &lt;/template&gt;
                &lt;template slot="price" slot-scope="data"&gt;
                  {{data.item.price|currency}}
                &lt;/template&gt;
              &lt;/b-table&gt;
  
              &lt;b-alert variant="warning" v-else&gt;
                &lt;strong&gt;There is no data..&lt;/strong&gt;
                &lt;p class="mb-0"&gt;To add data please use Add button at the navbar.&lt;/p&gt;
              &lt;/b-alert&gt;
            &lt;/b-card-body&gt;
          &lt;/b-card&gt;
  
  
  
  &lt;script&gt;
  import {mapGetters} from 'vuex'
  
  export default {
  
  data(){
  return {
  items: []
  },
  computed: {
        ...mapGetters(['getProducts']),
      },
      created() {
        this.items = this.getProducts
      },
  }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Alert v-else is not working.</p>