JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css">
<div id="el">
    <p>Selected: {{selected}}</p>
    <select v-select="selected" multiple  :options="roles" style="width: 400px; height: 1em;">
        <option value="0">default</option>
    </select>
</div>

JavaScript

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

        params: ['options'],

        bind: function() {
            var self = this
            $(this.el)
                    .select2({
                        data: this.params.options
                    })
                    .on('change', function() {
                        self.set(this.value)
                    })
        },
        update: function(value) {
            $(this.el).val(value).trigger('change')
        },
        unbind: function() {
            $(this.el).off().select2('destroy')
        }
    })

    var vm = new Vue({
        el: '#el',
        data: {
            selected: -1,

            roles : [
                { id: 1, text: 'hello' },
                { id: 2, text: 'what' }
            ]
        }
    })