MyComponent.vue

<template>
    <div v-show="banners.length > 0">        
        <swiper :options="swiperOption">
            <swiper-slide v-for="(banner, index) in banners" :key='index'>
                <img :src="'/img/banners/home/' + banner.image" :alt="banner.title">
                <div v-if="banner.title != null" class="text container">
                    <h4>{{ banner.title }}</h4>
                    <p>{{ banner.description }}</p>
                    <a :href="banner.link" class="leia text-uppercase" title="Leia Mais">Leia Mais</a>
                </div>
            </swiper-slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>    
    export default {  
        data () {
            return {
                banners : [],
                swiperOption: {
                    loop: true,
                    autoplay: {
                        delay: 6000,
                        disableOnInteraction: true
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
            }
        },
        created () {
            this.getBanners()
        },
        methods: {
            getBanners(){
                const action = '/api/banners/home'
                axios.get(action).then(response => {
                    this.banners = response.data.data
                }).catch(error => {
                    console.error(error)
                })
            }
        },
    }
</script>