title: <b-list-group-item> in vue.js CLI app with bootstrap-vue not rendered
body: <p>i have a app made with vue-CLI including bootstrap-vue. In my <strong>App.vue</strong> i'am using axios to fetch some sample JSON-data. With this simple code with html-tags (UL, LI), data are displayed:</p>
  
  <pre><code> &lt;p v-if="loading"&gt;Loading...&lt;/p&gt;
      &lt;ul v-else&gt;
        &lt;li v-for="(value, key) in post" :key="key"&gt;
          {{ key }} : {{ value }}
        &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>This is the output:
  <a href="https://i.stack.imgur.com/NO4GJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NO4GJ.png" alt="enter image description here"></a></p>
  
  <p>With code, using bootstrap-tags and the same data, the data is not been displayed in list-items, seems to be a broken rendering.</p>
  
  <pre><code>   &lt;b-list-group &gt;
        &lt;b-list-group-item
          href="#"
          class="flex-column align-items-start"
          v-for="result in post"
          v-bind:key="result.userId"
        &gt;
          &lt;div class="d-flex w-100 justify-content-between"&gt;
            &lt;h6 class="mb-1"&gt;{{ result.title }}&lt;/h6&gt;
            &lt;small&gt;{{ result.id }}&lt;/small&gt;
          &lt;/div&gt;
  
          &lt;p class="mb-1"&gt;{{ result.body }}&lt;/p&gt;
  
        &lt;/b-list-group-item&gt;
      &lt;/b-list-group&gt; 
  </code></pre>
  
  <p>This is the output:
  <a href="https://i.stack.imgur.com/hnHO7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnHO7.png" alt="enter image description here"></a></p>
  
  <p>The html-code is generated but no data between the tags. The element-Inspector (chrome) shows ...</p>
  
  <p><a href="https://i.stack.imgur.com/VXXM1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VXXM1.png" alt="enter image description here"></a></p>
  
  <p>What's the problem? Has anybody an idea? Please help.</p>
  
  <p>This is my <strong>main.js</strong>:</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router'
  import JQuery from 'jquery'
  let $ = JQuery
  
  import BootstrapVue from 'bootstrap-vue'
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  Vue.use(VueRouter);
  
  Vue.prototype.$log = console.log;
  
  new Vue({
    el: '#app',
    render: h =&gt; h(App)
  })
  </code></pre>
  
  <p>This is my script in <strong>Vue.app</strong>:</p>
  
  <pre><code>&lt;script&gt;
  const productAPI =
    "http://www.m.myapp2go.de/services/getnewsliste.php?typ=news&amp;id=10024";
  
  import axios from "axios";
  import Counter from "./Counter";
  
  export default {
    name: "app",
    data() {
      return {
        msg: "Vue.js Template Test App",
        loading: false,
        post: null,
        results: null,
        error: ""
      };
    },
    components: {
      "my-counter": Counter
    },
    created: function() {
      this.loading = true;
      axios
        .get("https://jsonplaceholder.typicode.com/posts/1")
        .then(res =&gt; {
          this.loading = false;
          this.post = res.data;
        })
        .catch(err =&gt; {
          this.loading = false;
          this.error = err;
        });
    },
    methods: {
      log(message) {
        console.log(message);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>