Property or method is not defined on the instance but referenced during render while passing data from Laravel to Vue

I tried to pass data(or variable) from Laravel controller to Vue component via blade but i faced this error.

app.js

Vue.component('vue-home', require('./components/HelloWorld.vue').default);

const app = new Vue({
    el: '#app',
});

My controller

        $slider = DB::table('sliders')->orderBy('place')->get();

        return view('main/index',compact('slider'));

index.blade.php

<!-- /resources/views/main/index.blade.php -->
@extends('layouts.app')
@section('content')
    <div id="app">
        
        <vue-home slider=""></vue-home>
    </div>
@endsection

HelloWorld component script

<script>
    export default {
        name: 'HelloWorld',
        props: ['slider'],

        data: function () {
            return {
                slider:this.slider,
            }
        },
        mounted(){
            console.log(this.slider)
        }
    }
</script>

But nothing shown in my page besides design and i want to pass my data . How can i achieve that?
Btw , Vue dev tools say that VueHome has attrs and i can see data in here .

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2y8697X
via IFTTT