Компонент внутри другого компонента не работает - webpack - Vue.js 2

Я совершенно новичок в Vue.js, и поэтому я чувствую, что проблема очень проста. Вот мой компонент Test.vue:

<template>
  <p>Hello Worldd</p>
</template>
<script>
export default {
  name : 'test'
}
</script>

Я пытаюсь отобразить это «Hello Worldd» в другом компоненте с именем UserDevices.vue. Вот содержимое этого файла:

<template>
  <div>
    <test></test>
    <p>test</p>
  </div>
</template>

<script>
import Test from './Test'

export default {
  name: 'UserDevices',
  components: {Test}
}

Я получаю сообщение об ошибке:

[Vue warn]: Unknown custom element: <test> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <UserDevices> at src/components/UserDevices.vue
       <App> at src/App.vue
         <Root>

Я использую каркас webpack для vue в качестве шаблона. Разве это не правильный подход к этому?