Component not rendering when using vue-template - templates

Question

I have the following...
main.vue
<template>
<div>
<header></header>
</div>
</template>
<script>
export default {}
</script>
header.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data: () => {
return {
message: 'Dashboard'
}
}
};
</script>
main.js
import Vue from 'vue';
import Header from './header.vue'
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')
But when I run this the header component is never rendered. What am I missing? Does using the vue-template webpack plugin require something special here?
I have looked at a couple similar stack overflows and I have tried to use components: { Header } instead but that still doesn't work.
I also tried...
main.vue
<template>
<div>
<header></header>
</div>
</template>
<script>
import Header from './header.vue'
export default {
components:{
"header": Header
}
}
</script>
header.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data: () => {
return {
message: 'Dashboard'
}
}
};
</script>
main.js
import Vue from 'vue';
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

Answer 1

Yours is a frequent problem:
[Vue warn]: Do not use built-in or reserved HTML elements as component id: name
In your case <header> is a reserved HTML element.
The same happens to <main>, <article> and so on.
Solution: Rename your header component to other name.
Example (I renamed header to header2):
main.vue
<template>
<div>
<header2></header2>
</div>
</template>
<script>
import Header from './header.vue'
export default {
components:{
"header2": Header
}
}
</script>
header.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Dashboard'
}
}
};
</script>
Bonus: Don't use arrow functions as in data: () => {, that will give you problems. Use like data() {. This rule applies to methods, computeds, watchers and all other Vue instance options.