Lazy loading not working on child routes in Vue.js

Question

So recently I implemented lazy loading to all my routers. Everything seems to work well, except I just noticed recently that I am unable to navigate to a child's router path. I tried removing the lazy loading and everything works as it supposed to. Any ideas on how I can fix this?

User's flow: The user clicked the sign up button and it will navigate the user to the verify phone page. After the user is redirected to the verify phone page, the user clicked verify email to gets redirected to verify email page. However instead of being redirected to verify email page it just redirects back to verify phone page.

This is the router code:

{
    path: "/sign-up",
    name: "SignUp",
    component: () => import("@/views/Dashboard/SignUp.vue"),
    children: [
      {
        path: "/sign-up-verify-phone",
        name: "VerifyPhone",
        component: () => import("@/views/Dashboard/VerifyPhone.vue"),
      },
      {
        path: "/sign-up-verify-email",
        name: "VerifyEmail",
        component: () => import("@/views/Dashboard/VerifyEmail.vue"),
      },
      
    ],
  },

Answer 1

some time ago, they changed the vue-template-compiler, so you have to return .default of the es6-module: https://github.com/vuejs/vue-router/issues/1379#issuecomment-298298329

component: () => import("@/views/Dashboard/VerifyEmail.vue").then(c => c.default)