Vuejs stop rendering component after adding transition in vue router

Question

Vuejs stopped rendering components after I added a transition in the children route of my dashboard layout when I checked the error there was no error and no warnings but whenever I am reloading the page the components render, and the same functionality works in the same application in my login layouts children route when I am going in the network I am getting 304 HTTP error
this is my index router

import { createRouter, createWebHistory } from "vue-router";
// importing Dashboard routes
import DashboardRoutes from "./Dashboard/index.js";
import store from "@/store/store.js";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      // redirecting the root to the login welcome page
      redirect: { name: "login" },
    },
    {
      // creating a group path for all the login pages
      path: "/login",
      name: "login",
      redirect: { name: "welcome" },
      component: () => import("../components/Pages/Login/LoginMain.vue"),
      //checking the condition if user is logged in or not and redirecting
      beforeEnter: (_, _2, next) => {
        if (store.state.login.isLoggedIn) {
          next("/dashboard");
        } else {
          next();
        }
      },
      children: [
        {
          path: "/welcome",
          name: "welcome",
          component: () =>
            import("../components/Pages/Login/Childrens/WelCome.vue"),
        },
        {
          path: "/austria-login",
          name: "austria-login",
          component: () =>
            import("../components/Pages/Login/Childrens/AustriaLogin.vue"),
        },
        {
          path: "/sms-login",
          name: "sms-login",
          component: () =>
            import("../components/Pages/Login/Childrens/SmsLogin.vue"),
        },
        {
          path: "/enter-tpn",
          name: "enter-tpn",
          component: () =>
            import("../components/Pages/Login/Childrens/EnterTpn.vue"),
            //chcking the condition of phone and social security token is entered
          beforeEnter: (_, _2, next) => {
            if (!store.state.login.phoneVerified) {
              next("/sms-login");
            } else {
              next();
            }
          },
        },
      ],
    },
    // using Dashboard Routes
    ...DashboardRoutes,
  ],
  scrollBehavior(_, _2, savedPosition) {
    if (savedPosition) {
      window.scrollTo(savedPosition);
    } else {
      window.scrollTo(0, 0);
    }
  },
});

export default router;

this is my dashboard children routes

import AppointmentRoutes from "./Appointment"; // importing appointment children routes
import SettingRoutes from "./Setting";
import store from "@/store/store";
const DashboardRoutes = [
  {
    // router group for all the dashboard views
    path: "/dashboardMain",
    name: "dashboardMain",
    component: () => import("../../components/Pages/DashBoard/IndexMain.vue"),
    beforeEnter: (_, _2, next) => {
      if (store.state.login.isLoggedIn) {
        next();
      } else {
        next('/login');
      }
    },
    children: [
      {
        path: "/dashboard",
        name: "dashboard",
        component: () =>
          import("../../components/Pages/DashBoard/Home/DashBoard.vue"),
        props: { sidebar: true },
      },
      // router for appointments
      {
        path: "/appointments",
        name: "PatientAppoinetments",
        redirect: { name: "PatientAppointmentsData" },
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientAppointment/PatientAppointment.vue"
          ),
        props: { sidebar: true },
        // children group for appointments components
        children: [...AppointmentRoutes],
      },
      {
        path: "/requests",
        name: "Requests",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientRequests/PatientRequest.vue"
          ),
      },
      {
        path: "/medications",
        name: "Medications",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientMedication/PatientMedication.vue"
          ),
      },

      {
        path: "/questions",
        name: "Questions",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientQuestionaries/PatientQuestionaries.vue"
          ),
      },

      {
        path: "/health-status",
        name: "HealthStatus",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientHealth/PatientHealth.vue"
          ),
      },
      {
        path: "/diagnostic-center",
        name: "PatientDiagnosticCenter",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientDiagnostic/PatientDiagnosticCenter.vue"
          ),
      },
      {
        path: "/vaccination",
        name: "PatientVaccination",
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientVaccination/PatientVaccination.vue"
          ),
      },
      {
        path: "/setting",
        name: "Setting",
        redirect: { name: "AccountSetting" },
        component: () =>
          import("@/components/Pages/DashBoard/Setting/SettingIndex.vue"),
        children: [...SettingRoutes],
      },
      {
        path: "/chat",
        name: "PatientChat",
        redirect: { path: "/chat/gautam" },
        component: () =>
          import(
            "../../components/Pages/DashBoard/PatientChat/PatientChat.vue"
          ),
        // children group for chat page
        children: [
          {
            path: "/chat/:name",
            name: "chatMessages",
            component: () =>
              import(
                "../../components/Pages/DashBoard/PatientChat/Children/PatientChatmessages.vue"
              ),
          },
        ],
      },
      {
        path: "/access-log",
        name: "AccessLog",
        component: () =>
          import("@/components/Pages/DashBoard/AccessLog/AccessLog.vue"),
      },
      {
        path: "/my-profile",
        name: "MyProfile",
        component: () =>
          import("@/components/Pages/DashBoard/MyProfile/MyProfile.vue"),
        props: { sidebar: true },
      },
    ],
  },
];

export default DashboardRoutes;

and this is DahboardMain where i want to renders my dashboard children pages
but i am getting the blank the black screen children area whenere i am going to any route except page reload

I tried to remove beforeEnter guard from the routes and I also removed all the code from the dashboard layout except router-view but still getting the black screen

enter image description here this is the image of the blank screen

enter image description here this is showing in the network