Vue.directive('select2', {
            inserted: function (el, binding, vnode) {
                let options = binding.value || {};

                var select = $(el).select2(options);
              
                select.on("select2:select", (e) => {
                    el.dispatchEvent(new Event('change', { target: e.target }));
                    // $emit('change',);
                    console.log("fire change in insert");
                });

                select.on("select2:unselect", function (e) {
                    el.dispatchEvent(new Event('change', { target: e.target }));
                    console.log("unselect");
                });

                for (var i = 0; i < vnode.data.directives.length; i++) {
                    if (vnode.data.directives[i].name == "model") {
                        
                        $(el).val(vnode.data.directives[i].value);

                        console.log("new value in inserted:"+vnode.data.directives[i].value);
                    }
                }

                $(el).trigger("change");
            },
            update: function (el, binding, vnode) {
                for (var i = 0; i < vnode.data.directives.length; i++) {
                    if (vnode.data.directives[i].name == "model") {
                        
                        $(el).val(vnode.data.directives[i].value);

                        console.log("new value in update:"+vnode.data.directives[i].value);
                    }
                }

                $(el).trigger("change");
                console.log("fire change in update");
            }
        });