How to fix bug with vue component?

Question

Vue.js

There are 2 components: PromocodesTable, PromocodesItem. Both single file vue components.
An error pops up: "Unknown custom element: "
Code PromocodesItem

<template>
  <tr class="table-row">
      <td class="table-col">
          <span>9</span>
      </td>
      <td class="table-col">
          <span>Вконтакте</span>
      </td>
      <td class="table-col">
          <span>10%</span>
      </td>
      <td class="table-col">
          <span
              :class="{ 'text-green': width <= 767 }"
          >
              {{ width <= 767 ? 'Активен' : 'Да'}}
          </span>
      </td>
  </tr>
</template>

<script>
export default {
  name: 'PromocodesItem'
}
</script>

Code PromocodesTable:

<template>
    <div class="promocodes-component">
        <table class="table finances-table promocodes-table">
            <thead
                v-if="width > 767"
                class="table-head"
            >
                <tr class="table-row">
                    <td class="table-col" style="width: 10%">
                        <span class="text-semi">ID</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Промокод</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Величина</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Активность</span>
                    </td>
                </tr>
                <tr height="20"></tr>
            </thead>
            <tbody class="table-body finances-table-body">
                <PromocodesItem></PromocodesItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { PromocodesItem } from './PromocodesItem.vue';

export default {
    name: 'PromocodesTable',
    computed: {
        ...mapGetters({
            width: 'ui/width'
        })
    },
    components: {PromocodesItem}
}
</script>

Question. Why is the import not working? When mount in promocodesTable variable PromocodesItem == undefined
Both components are on the same level.

Answer 1

import PromocodesItem from "./PromocodesItem.vue";

Answer 2

<promocodes-item></promocodes-item>write like this in template