将Bootstraps轮播与vue js相结合

Question

我试图从我的api加载一些数据并将其显示在bootstrap-carousel中。对于我的后端我正在使用laravel并且我已经在我的视图中显示了所有内容，但不知何故，在此过程中，旋转木马打破了。

这是我的JavaScript：

   Vue.component('deals-carousel',{

  template:`
  <div>
    <div id="myCarousel" class="carousel slide half-size white flex " data-ride="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>
      </ol>
      <div class="carousel-inner white ">
        <div v-for="(deal,key) in deals">
          <div v-if="key === 0" class="row item active full-size">
            <div class="">
              <div class="col-sm-2">

              </div>
              <div class="col-sm-4">
                  <img :src="deal.thumbnail" alt="tolles Bild" class="img-circle img-responsive full-size image-shadow margin"/>
              </div>
              <div class="col-sm-5 black-font panel-body">
                <h1 class="first black-font">{{deal.title}} {{key}}</h1>
                <br>
                <div class="description">
                  <p class="third black-font">{{deal.description}}</p>
                </div>
                <hr>
                <p class="third black-font">{{deal.quality}}</p>
                <p class="third black-font">Aus: {{deal.country}}</p>
                <hr>
                <h2 class="second flex black-font">{{deal.price}}€ {{deal.sellAs}}</h2>
              </div>
              <div class="col-sm-1">

              </div>
            </div>
          </div>
          <div v-else class="row item full-size">
            <div class="">
              <div class="col-sm-2">

              </div>
              <div class="col-sm-4">
                  <img :src="deal.thumbnail" alt="tolles Bild" class="img-circle img-responsive full-size image-shadow margin"/>
              </div>
              <div class="col-sm-5 black-font panel-body">
                <h1 class="first black-font">{{deal.title}}, {{key}}</h1>
                <br>
                <div class="description">
                  <p class="third black-font">{{deal.description}}</p>
                </div>
                <hr>
                <p class="third black-font">{{deal.quality}}</p>
                <p class="third black-font">Aus: {{deal.country}}</p>
                <hr>
                <h2 class="second flex black-font">{{deal.price}}€ {{deal.sellAs}}</h2>
              </div>
              <div class="col-sm-1">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  `,

  data(){
    return{
      deals: []
    };
  },
  mounted(){
    $.getJSON('api/deals', function(data){
      var a = data;
      this.deals = a;
    }.bind(this));
  }
});

这是我的HTML：

<div class="flex full-size">
  <deals-carousel></deals-carousel>
</div>

任何帮助都将受到高度赞赏！