LaravelでVue-Carouselを用いてカーセルを表示したいです。

前提・実現したいこと

LaravelでVue-Carouselを用いてカーセルを表示したいです。
初心者ですが、どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

カーセルを表示したいのですが、実際の表示は以下のようなテキストとなってしまいます。
「back」ボタンの下に、テキストでSlide1,Slide2,Slide3とカーセルを切り替え可能で表示するのが理想です。

よろしくお願いいたします。

該当のソースコード

カーセルのコンポーネント部分(Carousel.vue)

vue.js
1<template>
2  <carousel>
3    {{ cards() }}
4  </carousel>
5</template>
6
7<script>
8  import { carousel, slide } from 'vue-carousel';
9  export default {
10    components: {
11      carousel,
12      slide
13    },
14    data() {
15      return {
16        data: [
17          'Slide 1',
18          'Slide 2',
19          'Slide 3',
20        ],
21      };
22    },
23    methods:{
24      cards(){
25        var cardsElement="";
26        for(let i=0; i<this.data.length;i++){
27          cardsElement+="<slide>"+this.data[i]+"</slide>";
28        }
29        return cardsElement;
30      },
31    },
32  };
33</script>

表示部分(zeroToNine.blade.php)

blade.php
1...
2                    <div class="text-right">
3                        <button type="button" onclick="history.back()" class="btn btn-light">back</button>
4                    </div>
5                    <carousel-component></carousel-component>
6...
7        <script src=" {{ asset('/js/app.js') }} "></script>
8...

作成したコンポーネントの読み込み部分(app.js)

javascript
1import VueCarousel from 'vue-carousel';
2Vue.use(VueCarousel);
3Vue.component('carousel-component', require('./components/Carousel.vue').default);