Vuejs Laravel Layouts - Активы

Question

, пожалуйста, я пытаюсь сделать свое первое приложение vuejs - laravel, и у меня возникают проблемы с макетами и активами, это мой код:

Здесь я пытаюсь определить макет по маршруту, он неработают очень хорошо, потому что, когда я обновляю страницу, она сначала меняет основной макет, а после идет макет, необходимый

app.vue

<template>
    <div>
        <div v-if="$route.meta.layout == 'front'">
            <frontLayout></frontLayout>
        </div>
        <div v-else-if="$route.meta.layout == 'admin'">
            <adminLayout></adminLayout>
        </div>
        <div v-else>
            <mainLayout></mainLayout>
        </div>
    </div>
</template>
<script>
    let frontLayout = require('./layouts/frontLayout.vue');
    let mainLayout = require('./layouts/mainLayout.vue');

    import {mapState} from 'vuex'

    export default {
        components:{frontLayout,mainLayout},
        computed: {
            ...mapState({
                userStore: state => state.userStore
            })
        },
        created(){
            console.log('app vue')
        }
    }
</script>

Для активапосле установки веб-пакета laravel-mix следующим образом:

webpack.mix.js

mix.combine(['resources/assets/front/css/*','resources/assets/front/plugin-css/*','resources/assets/front/style.css'], 'public/css/front.css')
    .options({
      processCssUrls: false,
    });
mix.combine(['resources/assets/front/script/*','resources/assets/front/plugin-script/*'], 'public/js/front.js')
    .options({
      processCssUrls: false,
    });

Я пытаюсь импортировать файл front.css в frontLayout.vueкогда он был загружен так:

frontLayout.vue

<template></template>
<script>

    export default {

    }
</script>

<style scoped>
    @import '../../../../public/css/front.css';
</style>

Но это не всегда работает!любая помощь, пожалуйста.Спасибо