element plus el-select多选回显问题

首先先加载下拉数据；
随后加载编辑页面的回显数据；

 <el-form-item label="选择角色" required>
            <el-select v-model="tags" allow-create default-first-option filterable multiple placeholder="请选择"
                :reserve-keyword="false" style="width:600px;">
                <el-option v-for="item in arr" :key="item.id" :label="item.roleName" :value="item.id" />
            </el-select>
        </el-form-item>

//下拉数据
byRole() 
            this.$http.post('接口'}).then((res) => {
                if (res.data) {
                    let arr = res.data
                    this.arr = arr
                    this.RoleInfo()
                }
            }).catch(err => {
                return this.$message.error(err.message)
            })
        },
        //回显数据
        RoleInfo(){
         this.$http.post('接口', data).then((res) => {
                if (res.data) {
                    this.form = res.data
                    //遍历回显数据id组合成新的数组
                    let ids = res.data.roleNames.map(item => {
                        return item.roleId
                    })
                    this.tags = ids
                    this.list = res.data
                }
}