To register a component, first create a subclass constructor of Vue using Vue.extend(), then use the global Vue.component() method to register that constructor:.
To make things easier, you can also directly pass in the option object instead of an actual constructor:.
Then you can use it in a parent ViewModel’s template (make sure the component is registered before you instantiate your top-level ViewModel):.
If you prefer, components can also be used in the form of a custom element tag:.
To avoid naming collisions with native elements and stay consistent with the W3C Custom Elements specification, the component’s ID must contain a hyphen - to be usable as a custom tag.
It is important to understand the difference between Vue.extend() and Vue.component().