Vue Select2 Wrapper

Example.vue

<template>
    <div>
        Select an option: 
        <select2 v-model="fruit">
            <option value="">None</option>
            <option value="apple">Apple</option>
            <option value="orange">Orange</option>
        </select2>
    </div>
</template>

<script>
    import Select2 from './Select2.vue';
    export default {
        components: {
            'select2': Select2,
        },
        data() {
            return {
                fruit: '',
            };
        },
    };
</script>

Select2.vue

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

<script>
    export default {
        props: ['options', 'value'],
        mounted: function () {
            let vm = this
            $(this.$el)
                .select2({ data: this.options })
                .val(this.value)
                .trigger('change')
                .on('change', function (e) {
                    vm.$emit('input', this.value);
                    vm.$emit('change', e);
                })
        },
        watch: {
            value: function (value) {
                $(this.$el).val(value).trigger('change');
            },
            options: function (options) {
                $(this.$el).empty().select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    };
</script>