title: Vue for loop for objects not working
body: <p>I am trying to create a top menu with dropdown buttons when iterating over an object that looks like this:</p>
  
  <pre><code>links: {
        store: 'store',
        language: [{'target': '/english'},{'target': '/norwegian'}],
        login: 'user/login'
      }
  </code></pre>
  
  <p>I have tried to achieve that by making a loop that looks like this:</p>
  
  <pre><code>       &lt;div v-for="(value, key) in links" :key="key" class="control"&gt;
              &lt;div v-if='Array.isArray(value)'&gt;
                  &lt;dropdown-menu :menu="value"&gt;&lt;/dropdown-menu&gt;
              &lt;/div&gt;
              &lt;div v-else&gt;
                  &lt;a :href="value"&gt;
                      {{ key }}
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>But, I get errors:</p>
  
  <blockquote>
    <p>Property or method "value" is not defined on the instance but
    referenced during render. Make sure to declare reactive data
    properties in the data option.</p>
  </blockquote>
  
  <p>Even if I declare the value and key with initial values of null, it is not rendering anything:</p>
  
  <pre><code>data() {
    return {
      data: null,
      value: null,
      key: null,
    };
  },
  </code></pre>
  
  <p>This is the dropdown menu component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="dropdown is-active"&gt;
      &lt;div class="dropdown-trigger"&gt;
        &lt;button class="button" aria-haspopup="true" aria-controls="dropdown-menu"&gt;
          &lt;span&gt;Dropdown button&lt;/span&gt;
          &lt;span class="icon is-small"&gt;
            &lt;i class="fa fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="dropdown-menu" id="dropdown-menu" role="menu"&gt;
        &lt;div class="dropdown-content"&gt;
          &lt;a href="#" class="dropdown-item"&gt;
            Dropdown item
          &lt;/a&gt;
          &lt;a class="dropdown-item"&gt;
            Other dropdown item
          &lt;/a&gt;
          &lt;a href="#" class="dropdown-item is-active"&gt;
            Active dropdown item
          &lt;/a&gt;
          &lt;a href="#" class="dropdown-item"&gt;
            Other dropdown item
          &lt;/a&gt;
          &lt;hr class="dropdown-divider"&gt;
          &lt;a href="#" class="dropdown-item"&gt;
            With a divider
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'dropdown-menu',
      props: ['menu'],
      data() {
        return {};
      },
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>But, the dropdown menu is not even shown in the vue dev tools when I go to the top-bar component.</p>
  
  <p><strong>Update</strong></p>
  
  <p>For some reason if I removed the divs, and changed the template to this:</p>
  
  <pre><code>&lt;dropdown-menu v-if='Array.isArray(value)' :menu="link"&gt;&lt;/dropdown-menu&gt;
  &lt;a :href="value" v-else&gt;
       {{ key }}
  &lt;/a&gt;
  </code></pre>
  
  <p>If somebody could explain it, that would be great.</p>