axios响应数据可在多选时进行预选

Question

我正在使用流行的插件进行多选shentao/vue-multiselect

<multiselect v-model="test.selectedTags" 
    :options="options" 
    :multiple="true" 
    :clear-on-select="false" 
    :hide-selected="true" 
    :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
</multiselect>  

在我的代码中，我使用axios请求来获取要由多选功能预先选择的用户ID和名称

editUrl: function(id){
    let vm = this;
    axios.get('api/urls/' + id)
    .then( response => {
    vm.test.selectedTags = response.data.data.users.map(user => ({  name:user.name, id: user.id }))
         })
    .catch( error => {
         console.log(error);
     });
     },
 }

响应如下所示

selectedTags:Array[2]
    0:Object
        id:3
        name:"asdaa"
    1:Object
        id:4
        name:"atetest"

现在，我成功获得了结果并以多选方式预选了数据

但是，当我单击“ x”将其删除时，它不会删除所选数据，并且未显示任何错误。如何解决这个问题？ TIA

这是我的选项对象的样子

options:Array[2]
    0:Object
        id:4
        name:"atetest"
    1:Object
        id:3
        name:"asdaa"

测试对象

test:Object
    created_at:"2018-09-07 15:58:51"
    description:"server5"
    id:9
    latest_url_status:Object
    list_status:1
    selectedTags:Array[2]
        0:Object
           id:3
           name:"asdaa"
        1:Object
            id:4
            name:"atetest"
    updated_at:"2018-09-07 16:48:34"
    url:"https://httpstat.us/200"
    users:Array[2]

返回数据

export default {    
        data(){
            return {
                test:{
                    url: "",
                    selectedTags:[]
                },
                urls:{},
                users:{},
                contacts: [],
                monitorModal:false,
                result: '',
                pagination: {},
                loading: true,
                edit:false,
                urlChecked: {},
                logsModal: false,
                logsData:{},

                //mulltiselect
                options: []
            }
        },
    }