如何从 vue.js 中的另一个组件更新一个组件

我有一个基于vue的网络apply.JS2.0.

我有一个基于select2插件显示输入的组件.

默认情况下，它会显示选中的选项，但当用户单击它时，我会显示select2以允许用户修改选项.

代码如下所示:

<template>
<div @click="toggleEdit">
    <span v-show="isEnabled">
        <select
            class="form-control"
            :name="name"
            :multiple="multiple"
        >
            <option v-for="opt in options" :value="opt.id"> {{ opt.text }} </option>
        </select>
    </span>
    <span v-show="!isEnabled">
        <div v-if="selectedOptions.length === 0">
            {{ emptyText }}
        </div>
        <div v-for="opt in selectedOptions">
            {{ opt }}
        </div>
    </span>
</div>
</template>
<script>
export default {
    props: {
        options: {
            type: Array,
            required: false,
            default: function() {
                return []
            }
        },
        name: {
            required: true,
            type: String
        },
        multiple: {
            required: false,
            type: Boolean,
            default: false
        },
        emptyText: {
            required: false,
            type: String,
            default: ""
        },
        sourceUrl: {
            required: false,
            type: String,
            default: ""
        },
        enabled: {
            required: false,
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            isEnabled: this.enabled
        }
    },

    watch: {
        options: {
            handler: function() {
                console.log(arguments)
            },
            deep: true
        }
    },

    mounted: function() {
        this.select = $(this.$el).find("select");
        this.select.select2();
        var that = this;
        this.select.on("change", function(e) {
            var indexMap = {};
            for(var i = 0; i < that.options.length; i++) {
                that.options[i].selected = false;
                indexMap[that.options[i].id] = i;
            }
            var selected = that.select.select2('val');
            if(typeof selected === "string") {
                selected = [selected];
            }
            for(var i = 0; i < selected.length; i++) {
                var index = indexMap[selected[i]];
                console.log(index)
                console.log(selected[i])
                if(index !== undefined) {
                    var option = that.options[index];
                    option.selected = true;
                    that.$set(that.options, index, option);
                }
            }
        })
        this.select.on("select2:open", function() {
            that.isEnabled = true;
        });
        this.select.on("select2:close", function() {
            that.isEnabled = false;
        });
    },
    methods: {
        toggleEdit() {
            if(this.isEnabled) return; // to pass select2 clicks
            this.isEnabled = !this.isEnabled;
            var that = this;
            this.$nextTick(function() {
                that.select.select2("open");
            });
        }
    },
    computed: {
        selectedOptions: function() {
            console.log(this.options)
            return this.options.filter(function(option) {
                console.log(option.selected);
                if(option.selected === true) return true;
                return false;
            });
        }
    }
}

问题是:我想展示使用这个组件的多个不同的selects.Name属性可以是以下属性之一:model1[field1]、model1[field2]、...，model40[field1], ..., model99[field15]，其中每个modelN对应于数据库中的表及其各自的字段.

当用户更改选项时，必须将ajax请求发送到服务器，服务器返回如下json对象

{
   "errorText": null or "text with error",
   "disableFields": ["model3[field4]", "model24[field15]"]
}

我想解析"disableFields"数组，并从this个组件中禁用another个组件.

实现这一点的一种方法(伪代码):

foreach field in disableField:
    $(document).trigger("disableField" + field);

在mounted种方法中，this种成分

var self = this;
$(document).on("disableField" + this.name, function() {
    self.isEnabled = false
})

有没有更好的方法在没有父组件的情况下实现这一点？