URL of a deep nested route changes but not its view

Update: I can see the url changing in the address bar but the page contents doesnt change.

I have just started learning vue js recently and I am currently facing an issue with deep nested routes. Whenever I try to access the deep nested route I encounter a 404. The route that gives me 404 is on "/classes/new".

Router.js

import { createRouter, createWebHistory  } from "vue-router";
import AdminLayout from "./layouts/AdminLayout";
import NotFound from "./pages/NotFound";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            redirect: "dashboard",
            component: AdminLayout ,
            children: [
                {
                    path: "/dashboard",
                    name: "dashboard",
                    component: () => import("./pages/Dashboard")
                },
                {
                    path: "/courses",
                    name: "courses",
                    component: () => import("./pages/Courses")
                },
                {
                    path: "/classes",
                    name: "classes",
                    component: () => import("./pages/Classes/Classes"),
                    children: [
                        {
                            path: "/new",
                            name: "new",
                            component: () => import("./pages/Classes/AddClass"),
                        }
                    ]
                },
                {
                    path: "/categories",
                    name: "categories",
                    component: () => import("./pages/Categories")
                }
            ]
        },
        { path: "/:NotFound(.*)", component: NotFound }
    ]
});

export default router;