Как отправить значение с контроллера Laravel на Vue.js?

Question

У меня есть контроллер "SomethingController", модель "ValueModel" и View "Show.blade.php" и vue с компонентом "vue-component"
Теперь я хочу получить значение отправки (я получил от модели "ValueModel"и значение в формате JSON) от SomethingController до Show.balde.php , которое будет состоять из vue "vue-component" .Наконец, я хочу получить значение vue из контроллера.

Я знаю, как отправить значение из контроллера для просмотра.И я отправил его vue, когда значение находится в строке, используя props .Но я не могу отправить значение JSON из prop в vue.

Контроллер

//SomethingController.php
class SomethingControllerextends Controller
{
    public function index()
    {
        $e = ValueModel::get();
        $e = json_encode($e->toArray());
        return view('pages.Show')->with('e', $e);
    }
}

Просмотр

//Show.blade.php
<div class="app">
    <vue-component data={!!$e!!}></vue-component>
</div>

Vue

//SomethingController.php
<script>
export default {
    props: ['data'],
    data(){
        return{
            d : this.data,
        }
    },
    beforeCreate(){
        console.log('helllo');
        console.log(d)
        },
}
</script>

К моему удивлению, я получаю данные, которые печатаются в окне.и операции в функции beforeCreate () не работают после того, как значение напечатано в окне.
Как показано на рисунке, данные печатаются в окнах, которые отправляются из контроллера, где, как яхочу данные в vue.Я также хочу знать, почему он печатается.

Все отлично работает для String, возвращаемого из контроллера