Zły widok w vue router

Witajcie,
Mam mały problem z Vue routerem.

Mam taki kod:

    import Vue from 'vue'
    import Router from 'vue-router'
    
    // Containers
    const TheContainer = () => import('@/containers/TheContainer')
    
    // Views
    const Dashboard = () => import('@/views/Dashboard')
    
    //Driver
    const Driver = () => import('@/views/driver/Driver')
    const EditDriver = () => import('@/views/driver/EditDriver')
    const CreateDriver = () => import('@/views/driver/CreateDriver')
    const CreateFileDriver = () => import('@/views/driver/CreateFileDriver')
    
    //LoginHistory
    const LoginHistory = () => import('@/views/loginhistory/LoginHistory')
    
    Vue.use(Router)
    
    let router = new Router({
      mode: 'hash', // https://router.vuejs.org/api/#mode
      linkActiveClass: 'active',
      scrollBehavior: () => ({y: 0}),
      routes: routes()
    })
    
    router.beforeEach((to, from, next) => {
      const loggedIn = localStorage.getItem("auth");
      const isAuth = to.matched.some((record) => record.meta.requiresAuth);
      const isHide = to.matched.some((record) => record.meta.hideForAuth);
    
      if (isAuth && !loggedIn) {
        return next({path: "/login"});
      } else if (isHide && loggedIn) {
        return next({path: "/"});
      }
      next();
    });
    
    export default router
    
    function routes() {
      return [
        {
          path: '/',
          redirect: '/dashboard',
          name: 'Home',
          component: TheContainer,
          meta: {
            requiresAuth: true
          },
          children: [
            {
              path: 'dashboard',
              name: 'Dashboard',
              component: Dashboard
            },
            
            {
              path: 'drivers',
              meta: {label: 'Kierowcy'},
              component: {
                render(c) {
                  return c('router-view')
                }
              },
              children: [
                {
                  path: '',
                  component: Driver,
                  meta: {
                    requiresAuth: true
                  }
                },
                {
                  path: 'create',
                  meta: {label: 'Utwórz kierowcę'},
                  name: 'Utwórz kierowcę',
                  component: CreateDriver,
                  meta: {
                    requiresAuth: true
                  }
                },
                {
                  path: ':id/edit',
                  meta: {label: 'Edytuj kierowcę'},
                  name: 'Edytuj kierowcę',
                  component: EditDriver,
                  meta: {
                    requiresAuth: true
                  },
    
                  children: [
                    {
                      path: 'file/create',
                      meta: {label: 'Dodaj plik kierowcy'},
                      name: 'Dodaj plik kierowcy',
                      component: CreateFileDriver,
                      meta: {
                        requiresAuth: true
                      }
                    }
                  ]
                },
              ]
            },
          
            {
              path: 'login-history',
              meta: {label: 'Historia logowania'},
              component: {
                render(c) {
                  return c('router-view')
                }
              },
              children: [
                {
                  path: '',
                  component: LoginHistory,
                  meta: {
                    requiresAuth: true
                  }
                }
              ]
            },
          ]
        },
        {
          path: '/',
          redirect: '/login',
          name: 'Auth',
          component: {
            render(c) {
              return c('router-view')
            }
          },
          children: [
            {
              path: 'login',
              name: 'Login',
              component: Login
            }
          ]
        },
        {
          path: '*',
          name: '404',
          component: Page404
        },
        {
          path: '*',
          name: '500',
          component: Page500
        }
      ]
    
    }

Wszystko działa poprawnie prócz teg:: drivers/4/edit/file/create

Wyświetla mi się: '@/views/driver/EditDriver'
zamiast: '@/views/driver/CreateFileDriver'

W jaki sposób można to naprawić?

Moja znajomość Vue jest dość podstawowa, ale spróbowałbym zrobić tak:
:id/edit bez komponentu
w children 2 ścieżki:
'' -> EditDriver
'file/create' -> CreateFileDriver

Jak to nie pomoże to kombinować z ustawianiem EditDriver w innym miejscu.

Path podaj jako regexy, bo path CreateFileDriver matchuje się z EditDriver, dlatego kieruje na zły widok. Obadaj https://github.com/pillarjs/path-to-regexp

U mnie działa tak:

{
        path: '/:id/edit',
        name: 'sda',
        component: Dummy,
        children: [
            {
                path: 'file/create',
                name: 'Dodaj plik kierowcy',
                component: CreateFileDriver,
                meta: {
                    requires_auth: false,
                }
            },
            {
                path: '',
                name: 'ed',
                component:  EditDriver,
                meta: {
                    requires_auth: false,
                }
            }
        ]
    }

W dummy:

<template>
  <router-view/>
</template>