Wrapping the select2 plugin into a Vue.js custom directive.

vueSelect2.js

Vue.directive('select', {
    twoWay: true,
    priority: 1000,

    params: ['options'],

    bind: function () {
        var self = this;

        $(this.el)
            .select2({
                data: this.params.options
            })
            .on('change', function () {
                if ($(this).val()) {
                    self.set($(this).val());
                } else {
                    self.set($(this).attr('multiple') ? [] : $(self.el).val());
                }
            })
    },
    update: function (value, oldVal) {
        var el = $(this.el);
        if (el.val()) {
            this.set(el.val());
        } else {
            this.set(el.attr('multiple') ? [] : "");
        }

        if (!value && oldVal != undefined) {
            el.select2('val', '');
        }
    },
    unbind: function () {
        $(this.el).off().select2('destroy')
    }
});

@themsaid How to make this work with current spark 5 and prerendered select options on blade template?