VUE JS [NUXT JS] Why is the component not visible?

Question

Vue.js

This is in /layouts/master.vue
// So to speak, the basis
Here I include the header component

<template>
  <div>
    <header/>
    <div class="test">test</div>
    <nuxt/> 
  </div>
</template>

<script>
  import Header from '~components/Header.vue'

  export default {
    components: {
      Header
    }
  }
</script>

This is the index page in /pages/index.vue

<template>
  <div>
    <p>Hi from {{ name }}</p>
    <nuxt-link to="/test">Home page</nuxt-link>
  </div>
</template>

<script>
  export default {
    layout: 'master',
    asyncData ({ req }) {
      return {
        name: req ? 'server' : 'client'
      }
    }
  }
</script>

This is the component that should connect to the master, which is the top one! It connects without errors, but it does not appear and it is not there (
it is in /components/Header.vue

<template>
    <div>Тестовый компонент</div>
</template>

But the most interesting thing is that if you make a mistake in the component file, then the render swears. And if there are no errors, then it renders but the component does not appear.

Answer 1

A trifle, but created a problem ... The answer is simple:

Don't use inline or reserved HTML elements as component ID