izyim/resources/assets/vue/components/form_elements/SelectComponent.vue

<template>
    <select></select>
</template>
<script>
    import Select2 from 'select2';

    export default {
        props: ['options', 'value'],
        mounted(){
            var vm = this;
            $(this.$el)
                .select2({
                    data: this.options,
                    containerCssClass: "error",
                    dropdownCssClass: "select2-dark"
                })
                .val(this.value)
                .trigger('change')
                .on('change', function(){
                    vm.$emit('input', this.value);
                }).on('select2:open', function(){
                    if($(this).parents('.select2-dark').length){
                        $('.select2-dropdown').addClass('select2-dark');
                    }
                    $('.select2-results__options').scrollbar().parent().addClass('scrollbar-inner');
                });
        },
        watch: {
            value: function(value){
                $(this.$el).val(value).trigger('change');
                this.$emit('selectChange');
            },
            options: function(options){
                $(this.$el).select2({ data: options });
                $(this.$el).val(this.value).trigger('change');
            }
        },
        destroyed: function(){
            $(this.$el).off().select2('destroy')
        }
    }
</script>