Child Component not getting registered on a global component?

i dont know if i am missing something… but the following code is not working

let nav = Vue.extend({
            template: require('../templates/nav/nav.html'),
            components: {
                'item': { 
                      name:'item',
                      template: require('../templates/nav/item.html') 
                 }
            }
        });

Vue.component('nav', nav);

<nav>
    <item></item>
</nav>

it says…

app.js:1112 [Vue warn]: Unknown custom element: <item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Vue v1.0.25

[simplesmiler]

@Milewski you can try to use inline-template, but this won’t let you specify templates for the components, and will prohibit the use of slots.

[milewski]

so it means externally if i am outside of the template i cant invoke the child… it would need to be a global component for that and access the parent with this.$parent ?

for example this workflow would be impossible right?

<parent>
    <child></child>
</parent>

<another-parent>
     <child></child>
</another-parent>

in this example the <child> must to be a global component… and the two child will be exactly the same not mattering who is the parent? if i want to differentiate them then i would go like this

<parent>
    <child-one></child-one>
</parent>

<another-parent>
     <child-two></child-two>
</another-parent>

so in this case i will have 4 global components… this is the only way? there is no way to shirnk it down to 2 global components <parent> and <another-parent> and have the <child> element as a child within the same name?

<component>
    <child></child>
</component>

outputting..

<div class="im-component">
    <button>im child</button>
</div>

and

<another-component>
    <child></child>
</another-component>

outputting..

<div class="im-another-component">
    <div>
        <input>
    </div>
</div>

note: i am using the same name <child> on both places