title: Populate a nested array in a dropdown in Vue.js
body: <p>I have an array get as a response from zoho API like this.</p>
  
  <pre><code>    {
      "response": {
          "result": [{
              "4076840000001": [{
                  "Department": "Department 1",
                  "Department_Lead.ID": "4076840000001"
                   ...
              }]
          }, {
              "40768400000012": [{
                  "Department": "Department 2",
                  "Department_Lead.ID": "40768400000011",
                  ....
              }]
          }, {
              "407684000000125": [{
                  "Department": "Department 3",
                  "Department_Lead.ID": "40768400000011233",
                  ....
              }]
          }],
          "message": "Data fetched successfully",
          "uri": "/api/forms/department/getRecords",
          "status": 0
      }
  }
  </code></pre>
  
  <p>The array I'm refering is actually <code>response.result</code>. I assign it to a variable like,</p>
  
  <pre><code>vm.allDepartments = JSON.parse(data.Payload).response.result
  </code></pre>
  
  <p>I want to populate this into a dropdown so that the id will be the value and the <code>Department</code> will be displayed in the dropdown. In order to display this I need two <code>v-for</code>s since the department itself is an object within an array. But I guess there will be always one object in those arrays (if there are multiple, I still need the first objects' Department name.) I tried to accomplish my goal like this;</p>
  
  <pre><code>   &lt;select v-model="department"&gt;
          &lt;div v-for="department in allDepartments"&gt;
            &lt;option
              v-for="(value, key) in department"
              :value="key"&gt;{{value[0]['Department']}}&lt;/option&gt;
          &lt;/div&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>With this, my dropdown does not show anything (any option). But when I inspect the code I could see it.</p>
  
  <pre><code>&lt;select class="form-control" id="__BVID__105_"&gt;
      &lt;div&gt;
          &lt;option value="4076840000001"&gt;Department 1&lt;/option&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;option value="40768400000012"&gt;Department 2&lt;/option&gt;
      &lt;/div&gt;
      ....
  </code></pre>
  
  <p>I believe that this behaviour is due to the <code>div</code> around the option tag. But I can't seem to find a way to do that. This might be a simple thing, but I'm new to vue.js and I can't find any similar question in StackOverflow. Any help would be appreciated.</p>