Лучший подход к использованию Laravel Blade с Vue

Question

У меня есть 2 проекта: Laravel + Vuejs (Frontend - не использует SPA) и Laravel только для API. Моя проблема в том, что моя веб-страница похожа на электронную коммерцию, как веб-сайт, на котором у меня должна быть хорошая поисковая оптимизация.

Поэтому я решил сделать этот проект с Laravel Blades и некоторыми компонентами с Vuejs для быстрой манипуляции. Проблема в том, что мой проект растет, и мое приложение. js становится очень большим

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

import Vue from 'vue'
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
import UserService from './service/user-service';
import CartService from './service/cart-service';
import Vuelidate from 'vuelidate';
import StorageService from './service/storage-service';
import Toasted from 'vue-toasted';
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);
Vue.use(Loading);
Vue.use(Vuelidate);
Vue.use(Toasted);

Vue.prototype.$userService = new UserService();
Vue.prototype.$cartService = new CartService();

const storageService = new StorageService();

const userModel = storageService.getUserStorage();
const cartModel = storageService.getCartDataStorage();
if(cartModel) {
    Vue.prototype.$cartService.cartModel = cartModel;
}
if(userModel) {
    Vue.prototype.$userService.userModel = userModel;
}

Vue.component('prodlist-component', require('./components/ProductListComponent.vue').default);

Vue.component('filterinput-component', require('./components/FilterInputComponent.vue').default);
Vue.component('filtercategory-component', require('./components/FilterCategoryComponent.vue').default);

Vue.component('usermenu-component', require('./components/UserMenuComponent.vue').default);

Vue.component('auth-component', require('./components/modal/AuthComponent.vue').default);
Vue.component('login-component', require('./components/modal/LoginComponent.vue').default);
Vue.component('registration-component', require('./components/modal/RegistrationComponent.vue').default);
Vue.component('cepmodal-component', require('./components/modal/CepModalComponent.vue').default);

Vue.component('cart-component', require('./components/CartComponent.vue').default);

Vue.component('loading', require('./../../node_modules/vue-loading-overlay/src/js/Component.vue').default);

Vue.component('mainuser-component', require('./components/account/MainUserComponent.vue').default);
Vue.component('infouser-component', require('./components/account/InfoUserComponent.vue').default);
Vue.component('locationuser-component', require('./components/account/LocationUserComponent.vue').default);

Проблема в том, что при каждом запросе страниц изменений Laravel загружается мое приложение. js для каждый запрос, и я хочу загрузить только компоненты, которые принадлежат странице, но я не хочу, чтобы это был проект SPA.

Вот пример моей страницы menu.blade. php + vue. js компонентов.

@extends('layout/page', ['titlePage' => $titlePage, 'headerStyle' => 'menu', 'footerStyle' => 'show'])

@section('custom-css')

    <link href="{{ URL::asset('css/menu-page.css') }}" rel="stylesheet">

@endsection

@section('content')

<!-- SubHeader =============================================== -->
<section class="parallax-window" data-parallax="scroll" data-image-src="{{ asset('img/slides/banner_chocoffe_3.jpg') }}" data-natural-width="1400" data-natural-height="470">
    <div id="subheader">
    <div id="sub_content">
                    <div><em>Chocoffe / Le Parc</em></div>
                    <div><i class="icon_pin"></i> Recepção de pedestres - R. Le Parc, 100 - Imbiribeira, Recife - PE, 51160-280</div>
                    <div class="container-delivery-info text-center">
                        <div class="row row-delivery-info m-t-20">
                            <div class="col-lg-4 col-md-4">
                                <div class="title-delivery-info">
                                    Tempo de espera
                                </div>
                                <div>
                                    0 a 50 min
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                                <div class="title-delivery-info">
                                    Taxa da entrega
                                </div>
                                <div>
                                    A partir de R$ 8,00
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                                <div class="title-delivery-info">
                                    Fechado <i class="icon-dot-circled icon-red"></i>
                                </div>
                                <div>
                                    Abriremos as 12:00
                                </div>
                            </div>
                        </div>
                    </div>
    </div><!-- End sub_content -->
</div><!-- End subheader -->
</section><!-- End section -->
<!-- End SubHeader ============================================ -->

    <div id="position">
        <div class="container">
            <ul>
                <li><a href="#0">Home</a></li>
                <li>Menu</li>
            </ul>
        </div>
    </div><!-- Position -->

<!-- Content ================================================== -->
<div class="container margin_60_35" id="containerPrdList">
        <div class="row">

            <div class="col-md-9">
                <h3 class="nomargin_top" id="starters">Destaques</h3>
                <div class="row">

                    <div class="col-md-4">
                        <div class="card hvr-float">
                            <div class="img-card"
                                style="background-image: url({{ asset('img/categorys/sushi.jpg') }});">
                            </div>
                            <div class="card-description-promo">
                            <h4><b>Sushi</b></h4>
                            <p>Os pratos mais saborosos da culinária japonesa você encontra aqui</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card hvr-float">
                            <div class="img-card"
                                style="background-image: url('{{ asset('img/categorys/pizza.jpg') }}');">
                            </div>
                            <div class="card-description-promo">
                            <h4><b>Pizza</b></h4>
                            <p>Está com aquela vontade de comer aquela pizza deliciosa? achou o lugar</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card hvr-float">
                            <div class="img-card"
                                style="background-image: url('{{ asset('img/categorys/hamburguer.jpg') }}');">
                            </div>
                            <div class="card-description-promo">
                            <h4><b>Hamburguer</b></h4>
                            <p>Gostaria de matar a fome com aquele Hamburguer delicioso? peça aqui</p>
                            </div>
                        </div>
                    </div>

                </div>


                <prodlist-component></prodlist-component>

                </div>

                <cart-component></cart-component>

        </div><!-- End row -->
</div><!-- End container -->
<!-- End Content =============================================== -->

@endsection


@section('custom-script')

    <script src="{{ asset('core/menu-mp.js') }}"></script>

    <!-- SPECIFIC SCRIPTS -->
    <script  src="js/cat_nav_mobile.js"></script>
    <script>$('#cat_nav').mobileMenu();</script>
    <script src="js/theia-sticky-sidebar.js"></script>
    <script>
        jQuery('#sidebar').theiaStickySidebar({
        additionalMarginTop: 80
        });
    </script>
    <script>
        $('#cat_nav a[href^="#"]').on('click', function (e) {
                    e.preventDefault();
                    var target = this.hash;
                    var $target = $(target);
                    $('html, body').stop().animate({
                        'scrollTop': $target.offset().top - 70
                    }, 900, 'swing', function () {
                        window.location.hash = target;
                    });
        });
    </script>

@endsection

Я сомневаюсь, что это хороший подход? Существуют какие-то альтернативы?