title: Vue component looping through itself: Failed to mount component: template or render function not defined
body: <p>Can't seem be be able to figure out this one.
  I have a main wrapper component, which uses another component to render the navigation structure.</p>
  
  <p>Navigation can be multi level deep, hence needs to be generated dynamically.</p>
  
  <p>Wrapper looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;nav v-if="this.navigation.length"&gt;
          &lt;link-role :collection="navigation"&gt;&lt;/link-role&gt;
      &lt;/nav&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import LinkRole from './Formats/LinkRole';
      export default {
          components: {
              'link-role': LinkRole,
          },
          props: {
              navigation: {
                  type: Object,
                  default: () =&gt; { return {} }
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and <code>LinkRole</code> component like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;ul&gt;
          &lt;li v-for="(item, index) in collection" :key="index"&gt;
              &lt;a v-if="item.url" :href="item.url" v-text="item.name"&gt;&lt;/a&gt;
              &lt;span v-else v-text="item.name"&gt;&lt;/span&gt;
              &lt;link-role v-if="item.items" :collection="item.items"&gt;&lt;/link-role&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import LinkRole from './LinkRole';
      export default {
          components: {
              'link-role': LinkRole,
          },
          props: {
              collection: {
                  type: [Object, Array],
                  default: () =&gt; []
              }
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see within <code>LinkRole</code> I'm looping over over items in the collection and re-use itself <code>LinkRole</code> if there is another level of <code>items</code>.</p>
  
  <p>With this approach I'm getting </p>
  
  <blockquote>
    <p>[Vue warn]: Failed to mount component: template or render function not
    defined.</p>
  </blockquote>
  
  <p>but cannot figure out what is causing it.</p>