Is it possible on the server to render the blade template with vue?

Question

Laravel

Good afternoon.
I am learning Laravel and want to learn vuejs at the same time. I don’t want to bother about the rest api backend on Laravel and a separate frontend on vuejs (although this is ideologically correct).
How I now see the integration of vue into templates for myself:
1. There are blade templates that are rendered on the server from the data on the controller.
2. Data is passed and drawn with pure html + vuejs. Those. on each page in the template there is a vue initialization, but in order to comply with reactivity, it is necessary to pass the data array immediately when initializing vue.
What's the question. I have a separate view that contains a v-for to display a list. Because the data is transferred from the controller to this view, I want to immediately make them reactive.
This code example works, but does not add reactivity (only allows you to use vue as a templating engine)

<div>
        <div v-for="item in @json($itemList)">
            @{{item.label}}
        </div>
</div>

I found a way to achieve reactivity, but it looks rather clumsy:
View on blade

@section('content')
    <div>
        <div v-for="item in menulist">
            @{{item.label}}
        </div>
    </div>
    {{$md}}
@endsection

@section('vuedata')
    Vue.set(data, 'menulist', [{label:1}, {label:1}]);
@endsection

In the main template:

<script>
        var data = {};
        var vm = new Vue({ el: '#app',
            data: data
        });

        @yield('vuedata')
    </script>

The question is how to solve my problem correctly. Please do not say that the approach is not correct and you need to use the rest api on Laravel and a separate frontend on Vue, because this is the next step. Now my goal is to learn Laravel in full with the blade template engine.

Answer 1

https://www.youtube.com/watch?v=NNdTljRzPqE
Your case