Как настроить дочерние пути во vue?

Question

[svk44]

Что не так?

About.vue

<template>
  <app-layout-about>
    <div class="us">About</div>
  </app-layout-about>
  <router-view></router-view>
</template>

Us.vue

<template>
<h2 class="aboutUs">US</h2>
</template>

routes в index.js роутера

import Us from "../views/Us";
const routes = [
...
{
        path: '/about',
        name: 'About',
        component: () => import('../views/About'),
        meta: {
            layout: 'AppLayoutAbout'
        },
        children: [
            {
                path: 'us',
                name: 'Us',
                components: Us,
            },
        ]
    },
...
]

Comments

[Антон Антон]

а что не так?

[svk44]

1) vue-router.esm-bundler.js?6c02:72 [Vue Router warn]: Component "name" in record with path "/about/us" is not a valid component. Received "Us".
2) Vue Router warn]: uncaught error during route navigation:
3) vue-router.esm-bundler.js?6c02:3295 Error: Invalid route component
    at extractComponentsGuards (vue-router.esm-bundler.js?6c02:1983:1)
    at eval (vue-router.esm-bundler.js?6c02:3136:1)
4) vue-router.esm-bundler.js?6c02:72 [Vue Router warn]: Unexpected error when starting the router: Error: Invalid route component
    at extractComponentsGuards (vue-router.esm-bundler.js?6c02:1983:1)
    at eval (vue-router.esm-bundler.js?6c02:3136:1)

это ошибки, если объявляю компоненты перед путями, и в routes использую переменные.

если внутри путей обращаюсь ко всему по типу "component: () => import('../views/About')", то ошибки пропадают. но при изменении адреса от родительского к дочернему пути - адрес меняется, но ничего не происходит.