Vue - Using component inside other component

By default you have to use it with kebab-case in template tag.

Register component as of PascalCase notation. Use it in component with kebab-case notation. Simple as that!

Case 1 : Default

<template>
 <section class="home">
  <div class="hero-content">
   <h1>Hello World</h1>
  <search-bar></search-bar>
 </div>
 </section>
</template>
<script>
import SearchBar from './common/SearchBar'
export default{
 components: SearchBar
}
</script>

Case 2 : Customized

Or you want to register it with your way(by applying custom name) just change this code :

export default{
 components: {
  'search-bar' : SearchBar 
 }
}

UPDATE: This answer was provided in reference to vue version 2.x. I am unaware of vue 3.x and haven't read 3.x docs. You can always submit an edit draft for vue 3.x compatible solution. Thanks!

Script of Home.vue should be like following

import SearchBar from './common/SearchBar'

export default {
   name: 'Home',
   components: {
       'SearchBar': SearchBar
   }
}

If you SearchBar component already have a name property values SearchBar, the 'SearchBar' filed name is not required.