using the front end built by vue+element-ui, a very strange thing occurs when using the selection box component that is retrieved remotely:

<el-form-item label="">
    <el-select
        v-model="relatedDialogAdd"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder=""
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
            v-for="(item,key) in relatedDialogOpts"
            :key="key"
            :label="item.label"
            :value="item.value">
        </el-option>
    </el-select>
</el-form-item>

remoteMethod(query) {
    let param;
    query === "" ? param = {} : param = {search: query};

    this.$axios.get(this.ip +"/getchat",{
        params: param
    }).then(res => {
        let data = res.data.data.data;
        this.loading = true;
        setTimeout(_ => {
            this.loading = false;
            this.relatedDialogOpts = data.map(item => {
                return {
                    value: item.next_id,
                    label: item.inword
                };
            });
            console.log(this.relatedDialogOpts); //[{label:"",value:null},{label:"",value:null}]
        }, 200);
    });
}

all the above are written according to the examples in the ele.me element-ui document, the data format is the same, and the key value is also available, but this error has been reported all the time:

because there is a problem with the key value, checking one will directly select all of them, so I would like to ask if anyone can see what the problem is?