problem description

I introduced in app.vue that the names of root declaration subcomponents are all in a format similar to aaaVue
Why should I use aaa-vue when using the template node of app.vue?

<template>
  <div>
    <header-vue v-bind:num="num"></header-vue> header-vue,componentsheaderVue
    <body-vue texts=""></body-vue>
    <footer-vue></footer-vue>
  </div>
</template>

<script>
// 
import headerVue from "./components/header.vue";
import bodyVue from "./components/body.vue";
import footerVue from "./components/footer.vue";
export default {
  data: function() {
    return {
      text: "I am Father!",
      num: 10
    };
  },
  methods: {},
  components: {
    headerVue: headerVue, // 
    bodyVue, // 
    footerVue // // 
  }
};
</script>