在Vue.js的下拉列表中填充嵌套数组

我有一个数组get作为ZohoAPI的响应，如下所示

    {
    "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
    }
}

我引用的数组实际上是

response.result

。我把它赋给一个变量，比如

vm.allDepartments = JSON.parse(data.Payload).response.result

我想将其填充到一个下拉列表中，以便id将是值，

部门将显示在下拉列表中。为了显示这个，我需要两个
v-for
s，因为部门本身是数组中的一个对象。但我猜这些数组中总会有一个对象（如果有多个，我仍然需要第一个对象的部门名称）

   <select v-model="department">
        <div v-for="department in allDepartments">
          <option
            v-for="(value, key) in department"
            :value="key">{{value[0]['Department']}}</option>
        </div>
    </select>


{{value[0]['Department']}

这样，我的下拉列表不会显示任何内容（任何选项）。但是当我检查代码时，我可以看到它

<select class="form-control" id="__BVID__105_">
    <div>
        <option value="4076840000001">Department 1</option>
    </div>
    <div>
        <option value="40768400000012">Department 2</option>
    </div>
    ....


第一部门
第二部门
....

我认为这种行为是由于选项标签周围的
div
造成的。但我似乎找不到一个方法来做到这一点。这可能是一件简单的事情，但我是vue.js新手，在StackOverflow中找不到任何类似的问题。任何帮助都将不胜感激。
使用而不是
div

<select v-model="department">
  <template v-for="department in allDepartments">
    <option v-for="(value, key) in department"
            :value="key">{{value[0]['Department']}}</option>
  </template>
</select>


{{value[0]['Department']}

{{部门}
它正在工作！谢谢！。不知道在这种情况下使用
模板
。