Name Casing
You have two options when defining component names:
> With kebab-case
Vue.component('my-component-name', { /* ... */ })
When defining a component with kebab-case, you must also
use kebab-case when referencing its custom element,
such as in <my-component-name>.
> With PascalCase
Vue.component('MyComponentName', { /* ... */ })
import X from './components/Test.vue'
/*this is not technically wrong although not generally a good idea*/
<X msg="Hello World"/>