页面中的多个引导转盘不工作

我用vue.js制作了一个SPA站点,bootstrap 3.3.7,我的站点中有3个旋转木马,

这是我的旋转木马组件的一个样本,

<template>
  <div id="myTourCarousel" class="carousel slide" data- 
   ride="carousel">
    <div class="carousel-inner carousel_body" v-if="SliderFor 
 =='Tour'">
  <div :class="[i == 0 ? 'item active ' : 'item']" v-for="(item,i) in getTour" :key="'T'+i">
    <img :src="item.image_url" class="carousel_image" :alt="item.image_url">
  </div>
</div>
<!-- Left and right controls -->
<div class="carousel_btn_holder">
  <a
    class="left carousel-control Tour_carousel_prev carousel_btns"
    href="#myTourCarousel"
    data-slide="prev"
  >
    <img src="../../assets/prev.svg" alt>
  </a>
  <div class="Tour_image_thumb_holder" v-if="SliderFor == 'Tour'">
    <img
      v-for="(item,i) in getTour ? getTour.slice(0, 5) : []"
      :key="i"
      :src="item.image_url"
      :alt="item.image_url"
      class="image_thumb"
    >
  </div>
  <a
    class="right carousel-control Tour_carousel_next carousel_btns"
    href="#myTourCarousel"
    data-slide="next"
  >
    <img src="../../assets/next.svg" alt>
  </a>
</div>

我有三个不同的组件 IDS ,添加图像时,旋转木马不会自动滚动,按钮也不会工作。

数据通过计算属性进入组件

但它们有时是随机工作的。以前有人遇到过这个问题吗。