Nested Route on q-page using meta auth

[El2828]

Im developing an app using quasar and firebase and i do have a problem regarding of using meta ive already created firebase custom clasm and it worked but the thing is the nested route on the q-page cannot access all the children or show on the side page
this is my nested route along with the meta auth

const routes = [
    // {
    //     path: '/',
    //     component: () =>
    //         import ('layouts/MainForm'),
    //     meta: {
    //         requiresAuth: true,
    //     },
    // },
    {
        path: '/LoginForm',
        component: () =>
            import ('layouts/LoginForm'),
        meta: {
            requiresGuest: true,
        },
    },
    {
        path: '/MainForm',
        component: () =>
            import ('layouts/MainForm'),
        meta: {
            requiresAuth: true,
        },
        children: [{
                path: '/',
                component: () =>
                    import ('pages/PageDashboard.vue')
            },
            {
                path: 'Dashboard',
                component: () =>
                    import ('pages/PageDashboard.vue')
            },
            {
                path: 'PageRoom',
                component: () =>
                    import ('pages/PageRoom'),
            },
            {
                path: 'PageInventory',
                component: () =>
                    import ('pages/PageInventory.vue')
            },
            {
                path: '/PageUser',
                component: () =>
                    import ('pages/PageUser.vue')
            },
            {
                path: 'PageWorkSchedule',
                component: () =>
                    import ('pages/PageTasks.vue')
            },
            {
                path: 'SiteMaintenance',
                component: () =>
                    import ('pages/SiteMaintenance.vue')
            }
        ]
    },
    {
        path: '/SubForm',
        component: () =>
            import ('layouts/SubForm'),
        meta: {
            requiresAuth: true,
        },
        children: [{
                path: '/Dashboard',
                component: () =>
                    import ('pages/PageDashboard.vue'),
            },
            {
                path: '/PageUser',
                component: () =>
                    import ('pages/PageUser.vue')
            }
        ]
    },
    {
        path: '/Dashboard',
        component: () =>
            import ('pages/PageDashboard.vue'),
    },

]

// Always leave this as last one
if (process.env.MODE !== 'ssr') {
    routes.push({
        path: '*',
        component: () =>
            import ('pages/Error404.vue')
    })
}

export default routes```
code_text

this is my working custom claim and route using firebase

import { firebaseAuth } from 'boot/firebase'
import { LocalStorage } from 'quasar'

export default ({ router }) => {
    router.beforeEach((to, from, next) => {
        let requiresGuest = to.matched.some(record => record.meta.requiresGuest)
        let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
        let loggedIn = LocalStorage.getItem('loggedIn')

        if (requiresGuest) {
            if (!loggedIn && to.path !== '/LoginForm') {
                next('/LoginForm')
            } else {
                next()
            }

        } else if (requiresAuth) {
            firebaseAuth.onAuthStateChanged(userAuth => {
                if (userAuth) {
                    firebaseAuth.currentUser.getIdTokenResult()
                        .then((idTokenResult) => {
                            if (!!idTokenResult.claims.admin && to.path !== '/MainForm') {
                                next({
                                    path: '/MainForm',
                                    query: {
                                        redirect: to.fullPath
                                    }
                                })
                            } else if (!!idTokenResult.claims.user && to.path !== '/SubForm') {
                                next({
                                    path: '/SubForm',
                                    query: {
                                        redirect: to.fullPath
                                    }
                                })
                            } else {
                                next()
                            }
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                }
            })
        } else {
            next()
        }
    })
}

can someone help me regarding to this? thank you in advance