Vuejs router's links received via json sending Failed to resolve module specifier

I'm fetching some routes of a vuejs SPA through a json query, served by gunicorn.

Routes are fetch correctly and menu links are rendered but when links are clicked, I get

*TypeError: Failed to resolve module specifier '@/components/DashBoard/DashBoard.vue'
at eval (eval at aFetchMenus (store.js:135:18), <anonymous>:1:7)
at extractComponentsGuards (vue-router.mjs:2071:40)
at vue-router.mjs:3260:22*

The Login route stored in state works like a charm.

When aFetchMenus() is executed, the menu is loaded, the entries appear correctly in my component, however, when clicked the error appears.

My routes are stored in a Pinia store and extra routes are loaded via async method aFetchMenus:

    import { defineStore } from 'pinia'

    export const useRoutesStore = defineStore('routesStore', {

        state: () => {
            return {
                routes: [
                    {
                    path: '/login',
                    name: 'Login',
                    component: () => import('@/components/LogIn/LogIn.vue')
                    }
                ],
            }
        },
        action: {
            async aFetchMenus(router) {
                const res = await fetch('https://server/api/menus')
                if (res.ok) {
                    const arr = await res.json()
                    for (const route of arr) {
                        const r = {
                            path: route.path,
                            name: route.name,
                            component: eval(route.component)
                    }
                    router.addRoute(r)
                    this.routes.push(r)
                }
            }
        }
    })

My gunicorn responds using a python list:

    @app.route("/api/menus", methods=['GET'])

    def menus():
        routes = [
            {
            "path": "/dashboard",
            "name": "Dashboard",
            "component": "() => import('@/components/DashBoard/DashBoard.vue')",
            }
        ]
        return json.dumps(routes)

Here is my component displaying the menu:

    <template>

        <nav class="navbar navbar-light navbar-expand-md py-3">
            <div id="navcol-1" class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item" v-for="(route, index) of routes"><router-link class="nav-link" :to="route.path">{{ route.name }}</router-link></li>
                </ul>
            </div>
        </nav>

    </template>

    <script setup>
  
        import { routes } from '@/main'

    </script>