title: VueJS: Using x-template for a sub-component inside a component
body: <p>I am not correctly understanding the usage pattern for using x-template for a subcomponent inside a vuejs component.</p>
  
  <p>So, I have a component called CategoryNav.vue which has a template. Within that to display a list, we have used an x-template. But I render my page, it doesn't recognize this component created using the x-template. I think i am using it incorrectly. Any help is appreciated. Here is my main component code.</p>
  
  <p><strong>CategoryNav.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class=""&gt;
    &lt;menu-list :items="treeList"&gt;&lt;/menu-list&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script type="text/x-template" id="menu-list-template"&gt;
    &lt;ul v-if="items.length"&gt;
      &lt;li v-for="item of items"&gt;
        &lt;a :href="item.value"&gt;{{ item.label }}{{ item.id }}&lt;/a&gt;
        &lt;menu-list :items="item.children"&gt;&lt;/menu-list&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  &lt;script&gt;
  const MenuList = {
    name: 'menu-list',
    template: '#menu-list-template',
    props: ['items']
  }
  
  export default {
    name: 'category-nav',
    components: {
      MenuList
    },
    computed: {
      list () {
        return this.$store.state.topics
      },
      treeList () {
        const items = this.list.map(item =&gt; Object.assign({}, item, { children: [] }))
        const byValue = new Map(items.map(item =&gt; [item.value, item]))
        const topLevel = []
        for (const item of items) {
          const parent = byValue.get(item.parent)
          if (parent) {
            parent.children.push(item)
          } else {
            topLevel.push(item)
          }
        }
        return topLevel
      }
    }
  }
  &lt;/script&gt;
  </code></pre>