vue中试用BS3的轮播组件，出现跳转问题。

Question

现在项目是用的vue+bootstrap。
写了一个轮播组件

    <template>
    <div id="myCarousel" class="carousel slide ">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item" v-for="(carouse, $index) in carousel" :class="{'active': $index==0}">
              <img v-lazy="carouse.ActImg" alt="轮播图">
                <!-- <div class="carousel-caption">标题 1</div> -->
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <!-- <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> -->
        <!-- <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> -->
    </div> 
</template>
<script>
import $ from 'jquery/dist/jquery'
export default {
  props: {
    carousel: {
      type: Array,
      default: []
    }
  },
  data () {
    return {}
  },
  mounted () {
    console.log(this.carousel)
    $('.carousel').carousel('cycle')
  }
}
</script>
<style lang="stylus" scoped>
#myCarousel
  .carousel-inner
    .item
      max-height 450px
      img 
        width 100%
        max-height 450px
</style>

在首页引用组建传参过去一切正常，除了懒加载的loading比较大，
但是在另一页引用传参进去就会出现异常。 图片跳转不正常不是滑动，直接从1跳到3然后1 我一共四张图
看了下数据和传值都没有问题，也木有报错，请教各位能给点建议说明是哪里出现问题了吗？

Answer 1

试一下
用id 调用
轮播图 id 不要搞一样的
话说 用了 vue 还 加上jq？