[Vuejs]-Vue won't render custom component

Try this:

1- create a component in a separate .vue file

2- register it globally in main.js

3- then call it in any component directly.

1.

<template><div>{{ text }}<div></template>
<script>
    export default{
    props:['text']
    },

</script>

2. in main.js

//...
Vue.component('child-component',require('./path/to/chaild/compoent').default);
//...

3 Now you can call it in any component because it is registered globally.

<template>
    <div>
       <child-component text='some text to pass as prop.'/>
      //...
    </div>
</template>
//...