Vue Multiselect中的“未定义”组标签?

然而,我在这里面临着这个“未定义”的组名问题。

.html:

<multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="name"
    :hide-selected="true" 
    :custom-label="customLabel"
    :searchable="false" 
    placeholder="" 
    group-values="details" 
    group-label="groupDivision"
    >
  </multiselect>

new Vue({
    components: {
    Multiselect: VueMultiselect.default
    },
    data: {
    value: { groupDivision: 'Government', 
            name: 'Fish', 
            contact: 'Fish@.com' },

    options: [

      { 
        groupDivision: 'Governemnt',
        details:[
        {   name: 'Fish', contact: 'Fish@.com' },
        { name: 'Police', contact: 'Police@.com' },
        { name: 'Society', contact: 'Society@.com' }
        ]  
      },
       { 
        groupDivision: 'Media',
        details:[
        {   name: 'BBC', contact: 'BBC@.com' },
        { name: 'CNN', contact: 'CNN@.com' },
        { name: 'CBC', contact: 'CBC@.com' }
        ]  
      },
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.name}`
    }
  }
}).$mount('#app')

我已经设置了“ 组标签 但它仍然显示“未定义”。

有人知道问题出在哪里吗?提前感谢!

https://codepen.io/dennis-leeyinghui/pen/VzybrR