Свойство или метод не определены в экземпляре, но на них ссылаются во время рендеринга при передаче данных от Laravel до Vue

Question

Я пытался передать данные (или переменную) из контроллера Laravel в компонент Vue через блейд, но я столкнулся с этой ошибкой.

приложение. js

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

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

Мой контроллер

        $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">
        {{ json_encode($slider ?? '') }}
        <vue-home slider="{{json_encode($slider ?? '')}}"></vue-home>
    </div>
@endsection

Сценарий компонента HelloWorld

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

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

Но на моей странице ничего не отображается, кроме дизайна, и я хочу передать свой данные . Как я могу этого достичь? Кстати, инструменты Vue dev говорят, что у VueHome есть attrs, и я могу видеть данные здесь.