title: How to v-for loop a nested navigation in Vue.js?
body: <p>I'm trying to set up a multi-level navigation using Vue.js.</p>
  
  <p>When I try to use <code>v-for</code> inside my <code>v-for</code> in the parent navigation element, Vue throws an error and says <code>item is undefined</code>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="hf-nav"&gt;
    &lt;a v-for="item in itemLinks" :href="`${item.link}`"&gt;&lt;/a&gt;
      {{ item.title }}
      &lt;nav v-if="item.subItems"&gt;
        &lt;a v-for="sub in item.subItems" :href="`${sub.link}`"&gt;{{ sub.title }}&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>new Vue({
    el: '#hf-main',
    data: {
      homepage: true,
      itemLinks: [
        { title: 'Home', link: './' },
        {
          title: 'Diensten',
          link: './diensten',
          subItems: [
            { title: 'Elektromontage', link: './elektromontage' },
            { title: 'Installatietechniek', link: './installatietechniek' },
            { title: 'Schoonmaak', link: './schoonmaak' },
            { title: 'Overige diensten', link: './overige-diensten' },
          ],
        },
        { title: 'Over H&amp;F', link: './over-hf' },
        { title: 'Contact', link: './contact' },
      ],
    },
  })
  </code></pre>
  
  <p>I want Vue to loop and check if there's a second level in the inside an itemLinks object, and if so I want Vue to execute another loop.</p>