select2与vuejs格式错误

Question

我有来自vuejs docs

的这个select2 vuejs组件

<template>
    <select>
        <slot></slot>
    </select>
</template>

<script>
    export default {
        props: ['options', 'value'],

        mounted: function () {
            var vm = this
            $(this.$el)
            // init select2
                .select2({data: this.options})
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input', $(this).val())
                })
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value).trigger('change');
            },
            options: function (options) {
                console.log(options)
                // update options
                $(this.$el).select2({data: options})
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    }
</script>

附加到父模板，如

<div class="row">
                                            <div class="col-xs-6">
                                                <label class="control-label">Department</label>
                                                <select2 :options="departmentOptions" name="department_id"
                                                         id="department_id"
                                                         class="form-control" v-model="form.department_id">
                                                    <option disabled value="0">Select Department</option>
                                                </select2>
                                            </div>

                                            <div class="col-xs-6">
                                                <label class="control-label">Roles</label>
                                                <select2 :options="roleOptions" name="role_id" id="role"
                                                         class="form-control select_2" multiple="multiple"
                                                         v-model="form.role_id">
                                                    <option disabled value="0">Select Role</option>
                                                </select2>
                                            </div>
                                        </div>

我定期获取未格式化的元素，并且似乎与我在同一页面中使用更多select2组合这一事实相关