wrapper component with loglevel

form.html

<select2 :options="brands" v-model="form.brand_id" class="form-control" id="product_brand" name="product[brand_id]">
  <option value="" selected="true" disabled="disabled">Выбeрите бренд из списка</option>
</select2>

select2.vue

<!-- created by maynagashev on 01.05.17 -->
<!-- ref: https://vuejs.org/v2/examples/select2.html -->

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

<script type="text/babel">

    let ns = 'select2';
    let log = window.log.getLogger(ns);
    log.setLevel('debug');

    export default {
        props: ['options', 'value'],

        mounted: function () {
            log.debug('[mounted] init with options', this.options);
            var vm = this;

            // init select2
            $(this.$el)
                .select2({ data: this.options })
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input', this.value)
                })
        },

        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value).trigger('change');
            },
            options: function (options) {
                log.warn("[watch] options: ", options);
                // update options
                $(this.$el).select2({ data: options })
            }
        },

        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    }

</script>