asp.net - vuejs with select 2 control missing -

i have simple vue js setup trying used bind select2 using directive. rather use template reasons beyond control actual forced use asp:dropdownlist means forced have select boxes inline on client side.

so attempting set vue.directive after executing directive, select2 not anywhere found. because select2 executed, original select box hidden , end nothing showing on page.

debugging stops being hit , there not errors being displayed in console.

        <div id="tabuserinfo">             <input id="myid" type="text" required="required"  ref="myid" v-model="firstname" />             <span>{{firstname}}</span>             <select id="sel" v-select2="''" v-model="optid">                 <option value="1">1</option>                 <option value="2">2</option>             </select>          </div><script type="text/javascript">             $(document).ready(function () {                 vue.directive('select2', {                     bind: function (elem, fieldname) {                         $(elem).select2();                         debugger;                     },                     unbind: function (elem) {                         debugger;                     }                 });                 var me = "scott";                 var vm = new vue({                      el: '#tabuserinfo',                     data: { firstname: 'scott', optid:2 },                 });             });      </script> 

change hook bind inserted. seems select2 needs element in dom in order work correctly.

vue.directive('select2', {   inserted: function (elem, fieldname) {     $(elem).select2();   },   unbind: function (elem) {} }); 

in order handle updates data value, directive needs modified.

 vue.directive('select2', {    inserted: function (elem, binding, vnode) {      let select = $(elem)      select.select2();      select.val(vnode.context[binding.expression]).trigger("change")      select.on("change", function (evt) {        vnode.context[binding.expression] = evt.target.value      })    },    update: function (elem, binding, vnode) {      let select = $(elem)      select.val(vnode.context[binding.expression]).trigger("change")    }  }); 

normally, vnode should treated read parameter, given constraints of situation directive cheats little. dropdown should this:

<asp:dropdownlist runat="server" id="dropdown" v-select2="optid"> 

note argument of directive data property bind. replaces, v-model.