title: Trying to create a bootstrap carousel with vue js components
body: <p>I'm trying to implement a carousel in a Laravel project with Vue using mdb: <a href="https://mdbootstrap.com/docs/vue/advanced/carousel/" rel="nofollow noreferrer">https://mdbootstrap.com/docs/vue/advanced/carousel/</a></p>
  
  <p>And I'm trying to convert each slide:</p>
  
  <pre><code>&lt;mdb-carousel-item img src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" mask="black-light" alt="First slide"&gt;
    &lt;mdb-carousel-caption title="Light mask" text="First text"&gt;&lt;/mdb-carousel-caption&gt;
  &lt;/mdb-carousel-item&gt;
  </code></pre>
  
  <p>Into a Vue component, like this:</p>
  
  <pre><code>&lt;carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" title="First slide" text="First text"&gt;&lt;/carouselitem&gt;
  </code></pre>
  
  <p>So I have 2 components: carousel and carouselitem, and I call them from the Home component, where I want to implement the slider:</p>
  
  <pre><code>&lt;template&gt;
    &lt;carousel&gt;
      &lt;carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" title="First slide" text="First text"&gt;&lt;/carouselitem&gt;
      &lt;carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" title="Second slide" text="Second text"&gt;&lt;/carouselitem&gt;
      &lt;carouselitem picture="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" title="Third slide" text="Third text"&gt;&lt;/carouselitem&gt;
    &lt;/carousel&gt;
  &lt;template&gt;
  
  &lt;script&gt;
  import carousel from '../components/Carousel.vue';
  import carouselitem from '../components/Carousel_item.vue';
  
  export default {
    name: 'Index',
    components: {
      carousel,
      carouselitem
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the carousel component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;mdb-carousel :interval="8000" showControls showIndicators&gt;
      &lt;slot&gt;&lt;/slot&gt;
    &lt;/mdb-carousel&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mdbCarousel, mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';
  
  export default {
    name: 'ThumbnailsCarouselPage',
    components: {
      mdbCarousel,
      mdbCarouselItem,
      mdbCarouselCaption
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is the carouselitem component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;mdb-carousel-item img v-bind:src="picture" mask="black-light" v-bind:alt="title"&gt;
      &lt;mdb-carousel-caption v-bind:title="title" v-bind:text="text"&gt;&lt;/mdb-carousel-caption&gt;
    &lt;/mdb-carousel-item&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mdbCarouselItem, mdbCarouselCaption } from 'mdbvue';
  
  export default {
    name: 'carouselitem',
    props: ['picture','title','text'],
    components: {
      mdbCarouselItem,
      mdbCarouselCaption
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem now is that I can only see the first picture, it doesn't slide to the next one.</p>
  
  <p>There are no errors in the console.</p>
  
  <p>bootstrap-vue and mdbvue are properly installed.</p>
  
  <p>It works OK when I just copy and paste the code from the mdb website, but not when I convert it into components.</p>
  
  <p>Any ideas?</p>