How to use v-model and other js plugins in the same select

Question

I am using jquery select2 and datepicker plugins in my project. I have used custom directives for them. They work fine until I need to get the selected value using v-model . For some reason, it does not bind the value. My guess is that there is a conflict somewhere.

Here is my directive:

Vue.directive('select', {
    twoWay: true,
    inserted: function (el) {
        $(el).select2();
    },
    updated: function (el) {
        $(el).select2();
    }
});

The updated function doesn't work. But inserted works.

How can I get the selected value?

Answer 1

https://v2.vuejs.org/v2/guide/migration.html#twoWay-Prop-Option-removed

twoWay Prop Option removed

Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.

You will need to write a wrapper component . As it happens, the example is for select2.