title: Vue 2 Laravel 5.3 Bootstrap 4 Accordion
body: <p>Not sure what is wrong, the following code leads to a panel-like card showing the table and the heading but not an interactive accordion. I check the code from inspect it does show exact the same structure as bootstrap example shows. I tried to copy the bootstrap example directly into my Vue but it happens to have problem too but if I put them into view php it works. So what I suspect is that my Vue does not quite read the Bootstrap JS properly. but I already put <code>require('./bootstrap');</code> into my app.js I expect that would activate the JS in my Vue too. Please help. Although I do not think the code helps anything but I will still attach it for your reference. It does not seem to be my codes problem.</p>
  
  <p>Item-sorting-liost.vue</p>
  
  <pre><code>&lt;template&gt;
     &lt;div&gt;
       &lt;div id="accordion" role="tablist" aria-multiselectable="true"&gt;
          &lt;div v-for="cat in cats" class="card"&gt;
            &lt;div class="card-header" role="tab" :id="'heading'+cat.id"&gt;
  
                &lt;a
                data-toggle="collapse" 
                data-parent="#accordion" 
                :href="'#collapse'+cat.id" 
                aria-expanded="false" 
                :aria-controls="'collapse'+cat.id"
                &gt;
                  {{cat.name}}
                &lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div :id="'collapse'+cat.id" class="collapse in" role="tabpanel" :aria-labelledby="'heading'+cat.id"&gt;
              &lt;ul class="list-group"&gt;
                &lt;li
                v-for="subcat in subcats" 
                v-if="subcat.category_id == cat.id" 
                class="list-group-item"
                &gt;
                  &lt;a 
                  :name="subcat.name" 
                  href="" 
                  @click.prevent="getSelectedSubcatProducts(subcat.id)"
                  &gt;{{subcat.name}}&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>