Vue-router async loading url

I have a Laravel back-end where i can manage my Urls.

In front i'm using Vuejs with vue-router

First in main.js

    import EstarterSettings from './plugins/EstarterSettings'
    import router from './router'

then i'm trying to use a plugin to load my routes in the plugin

    import {RestDataSourcesMixin} from '../mixins/RestDataSourcesMixin'

    export default  {
        async install(Vue, options) {
        Vue.prototype.$routes = await 
                RestDataSourcesMixin.methods.requestApi(`/api/get-routes`)
        }
    };

Now, i want to use this routes in my vue-router

export default [
    {
        path: Vue.prototype.$routes.home,
        name: 'home',
        component: Views.Home,
        breadcrumb: []
    },
    {
        path: Vue.prototype.$routes.forgotten_password,
        name: 'forgottenPassword',
        component: Views.ForgottenPassword,
        meta: {
            requiresVisitor: true,
            breadcrumb: [
                { name: 'Home', link: '/' },
                { name: 'Forgotten password' }
            ]
        }
    }
]

But cause async, routes are undefined

How can i wait for routes loading or is there a way to do this ?

Thanks a lot

Edit

I was able to solve my problem thanks to this link. it exactly matches what I was looking for :

How to load all server side data on initial vue.js / vue-router load?

Edit 2

I found another way to do this. Set my routes as global variables in the html layout before the vuejs app

<script>
    window.appSettings = {
        routes : {{\app\Http\Controllers\Front\System\EstarterSettingController::getRoutes()}},
        settings: {{\app\Http\Controllers\Front\System\EstarterSettingController::getSettings()}}
    }
</script>
<script src="{{ mix('js/main.js') }}"></script>