VUE nested route gives the empty page - vue.js

Question

My routine returns an empty page for the children's route. Checked on the web, but can't find anything useful. I have the following setup.
Vue routes in the same index.js file
{
path: "/admin",
name: "Admin",
component: Admin,
children:[
{
path: "/scheduler",
name: "Scheduler",
component: Scheduler,
meta: {
role: "user",
middleware: [auth],
requiresAuth: true,
},
},
],
meta: {
role: "user",
middleware: [auth],
requiresAuth: true,
},
},
my beforeEach :
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (window.localStorage.getItem("token") == null) {
next({
path: "/login",
query: {
redirect: to.fullPath,
},
});
} else {
const localData = JSON.parse(window.localStorage.getItem("user")).role;
const middleware = to.meta.middleware;
const context = { to, from, next };
//If there is no error from Auth, Unauthorized
if (store.getters.errorDetails == null) {
middleware[0]({ ...context }).then(() => {
if (localData == "user" && to.meta.role == "user") {
if (to.meta.role == "admin") {
next("/user");
}
next("/user");
} else if (localData == "admin" && to.meta.role == "admin") {
if (to.meta.role == "user") {
next("/admin");
} else {
next("/admin");
}
} else {
next("/login");
}
});
}
}
} else {
next();
}
});
and I can see the following screen. Not sure what I am doing wrong. Any help is appreciated.
enter image description here