How to organize website sections in Vue?

Question

Vue.js

Vue + Laravel project.
The public part of the site has two formal sections: authorization and personal account. There is nothing in common between them in design and functionality.
There are also several static pages that are available regardless of whether the user is logged in.
And I had a question: is it worth combining authorization and LC into one entry point or still make two different files and on Laravel, respectively, there will be two main templates. Well, the transition during authorization will be carried out with a reboot, which seems to be a minus.
The same goes for individual pages.
What confuses me is that, like SPA, there should not be reboots, but it seems to be more convenient to separate all this logic.
Pages:

- home
- about
- help
- auth:
  - signup
  - signin
  - reset pass
  - new pass
- lk:
  - dashboard
  - analytics
  - refer
  - etc.

Answer 1

Look.
If you are making a front on Laravel, and not under Laravel, then let there be reboots, and if you have decided a full-fledged SPA application, why not make it separately? Make an API on Laravel, set JWTAuth for Laravel and you will be happy.
You will throw a request for authorization from the front, you will receive a token, you will save it in localStorage.
You connect Axios, after authorization in Headers you put the access_token, put the routes in the API into a group with a middleware under JWTAuth and that's it.
In Vue-Router you use beforeEach to check things. For example you do firstEnter for beforeEach.
You create a module for Vuex, store, which will have first_enter = true/false in state. Thus, during authorization, you can regulate whether you can download all the settings from the user again or not.
// login.js

export default{
     data(){
          return {
              login: '',
              pass: '',
            }
     }
     methods:{
          auth(){
              axios.post(api_root + '/login')
                    .then(res => {
                          if(res.data.access_token){
                              Vue.localStorage.set('access_token', res.data.access_token);   
                              this.$store.commit('app/set_first_enter', true);                        
                          }
                    })         
          }
     }
}

// app.store.js

const state = {
          first_enter: true,
}

const mutations = {
     set_first_enter(state, payload){
          state.first_enter = !!payload;
     },

     exit(state,payload){
           state.first_enter = true;
     }
};

const actions = {}
const namespaced = {}

export default {namespaced, state, getters, mutations, actions}

//router.js

import VueRouter from 'vue-router';
import router from './routes'  //роуты

const router = new VueRouter({
  mode: 'history',
  routes: routes,
});

router.beforeEach((to,from,next) => {
     //Здесь все проверки нужные, например есть ли в локалсторадже токен или нет 
});

export default router;