Vue Router addRoute blank at router-view

Question

First, sorry for my bad english. I'm learning about modular architecture / Folder By Feature in vue just like this enter image description here In user module I created a router like this enter image description here And add user's router to main router like this enter image description here Builder router is my apps routing after user logged in. And my main router is like this enter image description here What's happening is everything works fine when I access /dashboard or /about or other page that defined main router. And I click the /user router (it cames from user's module router) and it also work fine. But when I access /dashboard again. the router view show nothing (it is <!-- --> in dev console).

1. It's OK when access dashboard. Page displayed (white boxes) enter image description here
2. Also OK in user module router enter image description here
3. It became blank when I access /dashboard again enter image description here The structure of router-view

   <router-view> Page Loader
      <router-view> Module Loader (Index, Add, Edit)

This is my main router

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Builder',
    component: Builder,
    meta: {
      requiresAuth: true
    },
    redirect: '/dashboard',
    children: [
       {
        path: 'dashboard',
        name: 'Dashboard',
        meta: {
          pageTitle: 'Dashboard',
          requiresAuth: true
        },
        component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
      },
      {
        path: 'about',
        name: 'About',
        meta: {
          pageTitle: 'About',
          requiresAuth: true,
          breadcrumb: [
            {
              label: 'About',
              to: '/about'
            }
          ]
        },
        component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
      },
    ]
  };

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. Registering Route

import router from '../router/index'
import store from '../store/index'

const registerModule = (name, module: any) => {
  if (module.store) {
    store.registerModule(name, module.store)
  }

  if (module.router) {
    module.router.forEach(item => {
      router.addRoute('Builder', item)
    })
  }
}

export const registerModules = (modules: any) => {
  Object.keys(modules).forEach(moduleKey => {
    const module = modules[moduleKey]
    registerModule(moduleKey, module)
  })
}

3. User Module Route

const moduleRoute = [{
  path: '/user',
  name: 'User',
  component: () => import(/* webpackChunkName: "user" */ '../user/Module.vue'),
  meta: {
    pageTitle: 'User Management Builder',
    requiresAuth: true,
    breadcrumb: [
      {
        label: 'User',
        to: '/user'
      }
    ]
  },
  children: [
    {
      path: 'list',
      name: 'UserList',
      meta: {
        pageTitle: 'User Management',
        requiresAuth: true,
        breadcrumb: [
          {
            label: 'User',
            to: '/user'
          }
        ]
      },
      component: () => import(/* webpackChunkName: "user" */ '../user/views/Index.vue')
    },
    {
      path: 'add',
      name: 'UserAdd',
      meta: {
        pageTitle: 'User Add',
        requiresAuth: true,
        breadcrumb: [
          {
            label: 'User',
            to: '/user'
          }
        ]
      },
      component: () => import(/* webpackChunkName: "user" */ '@/modules/user/views/Add.vue')
    }
]
}]

export default moduleRoute

Extra Note: I'm using webpack too in case it it affects my problem

Any help please. Thank you in advance.