title: MaterializeCSS collapsible not working with v-for loop in vue js
body: <p>I just started implementing Vue JS to my existing project with having very basic knowledge and minimal implementation.</p>
  
  <p>My entire project is on Codeigniter 3 as backend framework and using html5, css3 and jQuery as frontend technology. I don't want to use other substitute frontend framework other than materializesCss, vue.js and of-course jQuery (at least for some time, till I am fully familiar with vue.js).</p>
  
  <p>well, coming to the point, in my FAQ, which is dynamically generated from the data I got from the database; I am using materialise collapsible. The general code structure is:</p>
  
  <pre><code>&lt;span v-for="category in categories"&gt;
      &lt;h6&gt;&lt;i :class="category.cat_icon"&gt;&lt;/i&gt; {{ category.title }}&lt;/h6&gt;
      &lt;ul class="collapsible"&gt;
          &lt;li v-for="faq in faqs"&gt;
              &lt;div class="collapsible-header" v-if="faq.fc_id === category.c_id"&gt;&lt;i class="icofont-dotted-right"&gt;&lt;/i&gt; {{ faq.q }}&lt;/div&gt;
              &lt;div class="collapsible-body" v-if="faq.fc_id === category.c_id"&gt;&lt;span&gt;{{ faq.a }} &lt;/span&gt;&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>...
  necessary js file includes
  ...</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function(){
         $('.collapsible').collapsible();
      });
      &lt;/script&gt;
  
      &lt;script&gt;
      var app = new Vue({
          el: "#faq",
          data: {
              title: "Frequently Asked Questions",
              categories: [],
              faqs: [],
              recommends: []
          },
          mounted() {
             axios.get("&lt;?php echo base_url('getFaqCategories');?&gt;")
                  .then(response =&gt; {
                      this.categories = response.data
                  })
                  .catch(function (error) {
                      console.log(error);
                  })
                  .then(function(){
                      $('.collapsible').collapsible();
                  }),
              axios.get("&lt;?php echo base_url('getFaqs');?&gt;")
                  .then(response =&gt; {
                      this.faqs = response.data
                  })
                  .catch(function (error) {
                      console.log(error);
                  })
                  .then(function(){
                      $('.collapsible').collapsible();
                  }),
              axios.get("&lt;?php echo base_url('recommended');?&gt;")
                  .then(response =&gt; {
                  this.recommends = response.data
              })
          }
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>The sequence of included js files are, [1] jQuery [2] materialize.js [3]vue.min.js [4] axios.min.js</p>
  
  <p>Now the strange part is, it is working perfectly in my localhost but after uploading it to my production server (AWS EC2), nothing happens when clicking to the list.</p>
  
  <p>No error is displaying.
  Quick suggestion welcomed, please keep in mind that I am having very basic knowledge about vue.js.</p>