vuejs laravel Layouts - Assets - laravel

Question

please I try to make my first vuejs - laravel application,
and I get a trouble with layouts and assets, this is my code:
Here i try to detect the layout from route, it dosen't work very well, because when i refresh the page, it chage the main layout first and after go the layout needed
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>
For the asset after setting the webpack laravel-mix like this:
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,
});
I try to import the front.css file in the frontLayout.vue when it was loaded like this:
frontLayout.vue
<template></template>
<script>
export default {
}
</script>
<style scoped>
#import '../../../../public/css/front.css';
</style>
But it dosen't work always ! any help please. Thanks