Как использовать в дочернем компоненте Vue. js третий компонент, который был лениво загружен в родительский компонент?

Question

Я загрузил компонент UserList в родительский компонент, как я могу использовать его в дочернем компоненте без необходимости его перезагрузки? (и не позволяйте проходить снова и снова через created hook)

Родительский компонент выглядит так:

<template>
  <div>
    <router-link to="/users">Users</router-link>
  </div>
</template>
<script>
export default {
  components: {
    UserList: () => import(/* webpackChunkName: "user-list" */ "./UserList.vue")
  }
}
</script>

А мой дочерний компонент Users.vue выглядит так:

<template>
  <div>
    <user-list />
  </div>
</template>

<script>
export default {
  components: {
  },
  mounted () {
    console.log('Users component mounted.')
  }
}
</script>

В консоли javascript появляется следующее сообщение об ошибке:

[Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «name».