vue-router TypeError: "Вызов" set name "для объекта, который не реализует интерфейс HTMLFormElement."

Question

У меня странная проблема с vue-router, и я не могу отладить ее.

Вот мои маршруты.ts

import Navbar from '@/layout/Navbar.vue'
import SidebarMenu from '@/layout/SidebarMenu.vue'
import Footer from '@/layout/Footer.vue'

const LocaleComponent = {
    render(h: any) {
        return h('router-view')
    }
}

function castParam(route: any) {
    const props = { ...route.params }
    props.id = +props.id
    return props
}

export default [
    {
        name: 'Home',
        path: '/',
        components: { default: () => import('@/views/LandingPage.vue'), navbar: Navbar, footer: Footer }
    },
    // user routes
    {
        name: 'Profile',
        path: '/profile',
        components: { default: () => import('@/views/Profile.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },
    {
        name: 'BillingInfo',
        path: '/billing-info',
        components: { default: () => import('@/views/BillingInfo.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },
    // project settings
    {
        path: '/settings',
        components: { default: LocaleComponent, sidebar: SidebarMenu },
        children: [
            {
                name: 'WorkspaceNew',
                path: 'new',
                component: () => import('@/views/WorkspaceSettings.vue'),
                meta: { requiresAuth: true }
            },
            {
                name: 'WorkspaceEdit',
                path: ':workspaceName',
                component: () => import('@/views/WorkspaceSettings.vue'),
                meta: { requiresAuth: true },
                props: true
            }
        ]
    },
    // projects and tasks
    {
        name: 'AllWorkspaces',
        path: '/workspaces',
        components: { default: () => import('@/views/AllWorkspaces.vue'), sidebar: SidebarMenu },
        meta: { requiresAuth: true }
    },    
    {
        path: '/workspace/:workspaceName',
        components: { default: LocaleComponent, sidebar: SidebarMenu },
        children: [
            {
                name: 'WorkspaceTasks',
                path: 'overview',
                component: () => import('@/views/WorkspaceTasks.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true },
                props: true
            },
            // single task
            {
                name: 'TaskNew',
                path: 'task/new',
                component: () => import('@/views/Task.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            },
            {
                name: 'TaskEdit',
                path: 'task/:id',
                component: () => import('@/views/Task.vue'),
                props: castParam,
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            },
            // Logs
            {
                name: 'Logs',
                path: 'logs',
                component: () => import('@/views/WorkspaceLogs.vue'),
                meta: { requiresAuth: true, requiresOpenWorkspace: true }
            }
        ]
    },
    // catch all
    {
        path: '*',
        redirect: { name: 'AllWorkspaces' }
    }
]

Проблема возникает, когда я перехожу с /settings/:workspaceNameили /settings/new на любой другой маршрут в приложении.

Я получаю это сообщение об ошибке в консоли.Я также заметил, что URL-адрес не обновляется, даже если представление на самом деле меняется, и даже если я продолжаю взаимодействовать с приложением и перемещаюсь по различным маршрутам, URL-адрес остается http://localhost:8080/settings/:workspaceName