TP vueJs 2 + Laravel

Bonjour,

Après avoir vu le TP Carousel de la formation VueJS2 de Grafikart, j'essaie d'implémenter le tout avec laravel histoire d'en apprendre un peu plus, et là j'ai besoin de vous.

J'ai donc un App.vue :

 <div>
     <carousel>
         <carousel-slide v-for="n in slides" :index="n - 1">
             <p class="title">Slide {{ n }}</p>
             <img class="imgs" :src="'http://lorempicsum.com/futurama/630/300/'+ n" alt="">
         </carousel-slide>
     </carousel>
 </div>
</template>

<script>
    import Carousel from './js/components/carousel/Carousel'
    import CarouselSlide from './js/components/carousel/CarouselSlide'

    export default {
      data(){
        return {
          slides:5
        }
      },

    components: {
        Carousel,
        CarouselSlide
    }
}
</script>

Un Carousel.vue :

<template>
    <div class="carousel">
        <slot></slot>
        <button class="carousel__nav carousel__next" @click.prevent="next"> > </button>
        <button class="carousel__nav carousel__prev" @click.prevent="prev"> < </button>
        <div class="carousel__pagination">
            <button v-for="n in slidesCount" @click="goto(n-1)" :class="{active: n -1 == index}"></button>
        </div>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          index: 0,
          slides: [],
          direction: 'right'
        }
      },
      computed: {
        slidesCount () { return this.slides.length }
      },
      methods: {
        next () {
          this.index++
          this.direction = 'right'
          if (this.index >= this.slidesCount) {
            this.index = 0
          }
        },
        prev () {
          this.index--
          this.direction = 'left'
          if (this.index < 0) {
            this.index = this.slidesCount - 1
          }
        },

        goto (index) {
          this.direction = index > this.index ? 'right' : 'left'
          this.index = index
        }
      },
      mounted () {
        this.slides = this.$children
      }
    }
</script>

Un CarouselSlide.vue

<template>
    <transition :name="transition">
        <div v-show="visible">
            <slot></slot>
        </div>
    </transition>
</template>

<script>
  export default {
    props: {
      index: {type: Number, default: 0 }
    },
    computed: {
      transition () {
        if (this.$parent.direction) {
          return 'slide-' + this.$parent.direction
        }
      },
      visible () {
        return this.index === this.$parent.index
      }
    }
  }
</script>

Et un page.blade.php :

    <main>
        <div id="app">

        </div>
    </main>

Comment puis-je greffer le comportement du slider sur des images que j'aurais prises en base de donnée avec Laravel.
J'envois $sliders par exemple à ma vue page.blade.php depuis mon controller.
Dans mon fichier blade j'aurais fais par exemple :

 @foreach($sliders as $slider)
        <img src="{{$slider->url}}" alt="">
    @endforeach

Comment dois-je m'y prendre pour que $sliders soit disponible, et ou doit il être disponible ?
dans les props de CarouselSlide ? Carousel ? app ?
Je patauge !!

Merci à vous