title: bootstrap *slide.bs.carousel* event is not firing in vue js
body: <pre><code>&lt;div id="appFeatureimg" class="carousel slide"&gt;
      &lt;div class="carousel-inner row w-100 mx-auto"&gt;
          &lt;div class="carousel-item col-md-3 col-sm-3 col-3"  :class= "{active: index==0 }" v-for="(screenshot,index) in app_details.screenshots"&gt;
              &lt;div class="panel panel-default"&gt;
                 &lt;div class="panel-thumbnail"&gt;
                       &lt;a href="#" class="thumb"&gt;
                            &lt;img class="img-fluid mx-auto d-block" :src="screenshot"alt="slide 1" &gt;
                       &lt;/a&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
     &lt;a class="carousel-control-prev" href="#appFeatureimg" role="button" data-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
     &lt;/a&gt;
     &lt;a class="carousel-control-next text-faded" href="#appFeatureimg" role="button" data-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my html where i generate carousel item </p>
  
  <pre><code> &lt;script&gt;
              vue js code goes here
   &lt;/script&gt;
  </code></pre>
  
  <p>and other js code </p>
  
  
  
  <pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $( document ).ready(() =&gt; {
          console.log('ready');
          $('#appFeatureimg').on('slide.bs.carousel', (e) =&gt; {
              console.log('ready2');
              var $e = $(e.relatedTarget);
              var idx = $e.index();
              var itemsPerSlide = 4;
              var totalItems = $('.carousel-item').length;
  
              if (idx &gt;= totalItems-(itemsPerSlide-1)) {
                  var it = itemsPerSlide - (totalItems - idx);
                  for (var i=0; i&lt;it; i++) {
                      // append slides to end
                      if (e.direction=="left") {
                          $('.carousel-item').eq(i).appendTo('.carousel-inner');
                      }
                      else {
                          $('.carousel-item').eq(0).appendTo('.carousel-inner');
                      }
                  }
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is my jQuery for carousel.</p>
  
  <p>After <code>document.ready</code> function I get my console print but bootstrap event <strong>slide.bs.carousel</strong> is not firing.
  i put those code before my vue js and other script but no result.
  any suggestion will be really appreciable. </p>