vue2-select2.js

Vue.component('select2', {
    props: ['options', 'value'],
    template: `
        <div>
            <select multiple ref='select'>
                <slot></slot>
            </select>
        </div>
    `,
    mounted: function () {
        var vm = this;
        $(this.$refs.select)
            .select2({ data: this.options })
            .on('change', function (ev, args) {
                if (!(args && "ignore" in args)) {
                    vm.$emit('input', $(this).val())
                }
            });
            
        Vue.nextTick(() => {
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true })
        });
    },
    watch: {
        value: function (value, oldValue) {
            // update value
            $(this.$refs.select)
                .val(this.value)
                .trigger('change', { ignore: true });
        },
        options: function (options) {
            // update options
            $(this.$refs.select).select2({ data: options })
        }
    },
    destroyed: function () {
        $(this.$refs.select).off().select2('destroy')
    }
});

Hey, I have copied and expanded this to support a few extra features such as ajax. I have a question. What is the purpose of Vue.nextTick()? Also, Vue is undefined when I try to access nextTick() from within the .vue component -- is there a special way of accessing this function from within a .vue file?

I posted the code in a fork.