javascript - 在vue的组件中获取select2插件的值

Question

我做的一个select组件的封闭，这个select用了jquery的select2插件，所以双向数据绑定无法使用
我希望得到的结果是，利用vue的自定义指令实现 双向数据绑定，但是我发现官方示例的方式在非组件的情况下可以使用，但是

    var MiSelectComponent = Vue.extend({
        /**
         * 参数
         * name html的name标签
         * style style代码
         * class class标签
         * data.selected 选中项的值
         * data.options 选项数组
         * [{ text: '审核通过', value: '1'},{ text: '审核通过', value: '2'}]
         **/
        template:
        '<p class="dataTables_filter filterBox-item">' +
        '<select v-mi-select="name" name="{{ name }}" style="{{ style }}" class="mi_selected {{ class }}" v-model="data.selected">'
        +'<option track-by="$index" v-for="option in data.options"  v-bind:value="option.value">{{ option.text }}</option>'
        +'</select>' +
        '</p>'
        ,
        props: ['data', 'name', 'style' ,'class'],
    });
    
    
    Vue.directive('mi-select', {
        twoWay: true,
        priority: 1000,
        params: ['options', 'data'],
    
        bind: function () {
            var _self = this;
            console.log(_self);
            $(this.el)
                .select2()
                .on('change', function () {
                    _self.set(this.value)
                })
    
        },
        update: function (value) {
            $(this.el).val(value).trigger('change')
        },
        unbind: function () {
            $(this.el).off().select2('destroy')
        }
    });
    
        var vm = new Vue({
        el: '#el',
        components: {
            c: MiSelectComponent,
        },
        data: {
            selected: 0,
            sa: {
                selected: 2,
                options: [
                    { text: '审核状态', value: ''},
                    { text: '审核通过', value: '1'},
                    { text: '审核失败', value: '2'},
                ]
            },
            sb: {
                selected: 1,
                options: [
                    { text: '审核状态', value: ''},
                    { text: '审核通过', value: '1'},
                    { text: '审核失败', value: '2'},
                ]
            },
        }
    })
    
    
    <p id='el'>
        <c name="aaaaaa" v-bind:options.sync="sb.options" :selected.sync="sb.selected"></c>
        <c name="bbbbbb" v-bind:options.sync="sb.options" :selected.sync="sb.selected"></c>
    </p>

Answer 1

具体问什么？组件下也可以使用啊