猫头鹰传送带吐出单个物品而不是传送带

Question

我正在尝试制作一个轮播，该轮播从最近开始显示特定区域中的新导师列表。我正在使用laravel 5.6，vue.js和owl carousel。

下面，我使用axios从数据库中检索并调用owl-carousel

<script>
      export default {
    props: {
      areaId: null,
    },

    data () {
      return {
        NewTutors: {}
      }
    },

    methods: {
      getNewTutor () {
        var that = this;
        axios.get( '/' + this.areaId + '/home/new').then((response) => {
          that.NewTutorss = response.data;
        })
        .catch(error => {
          console.log(error)
          this.errored = true
        });
      }
    },

    mounted () {
      this.getNewTutor();
    }
  }
      $(document).ready(function() {
        $('#NewHustles').owlCarousel();
    });

</script>

在这里，尝试在轮播中循环浏览每个新的导师。

<div class="owl-carousel owl-theme owl-loaded" id="NewTutors">

    <div class="owl-stage-outer">

        <div class="owl-stage">


            <div class="owl-item" v-for="NewTutor in NewTutors>
                <div class="card">
                    <div class="card-header">
                        {{NewTutor.name}}
                    </div>
                <div class="card-body">
                  <div>
                    {{NewTutor.area.name}}
                  </div>
                  <div>
                    Image goes here
                  </div>
                  <div>
                    {{NewTutor.user.first_name}}
                  </div>
                </div>
                </div>
            </div>


            </div>

        </div>
    </div>

我得到了所有具有正确数据传递的卡片，但是我得到的不是一排轮播，而是像一大堆卡片一样移动。我已经尝试了Vue.nexttick，并尝试了其他一些操作，但是似乎没有任何工作很正确。

感谢您的帮助。