Select2 on change event is not working in Vuejs

Question

I was working with select2 in vuejs , I found vuejs is not working with jquery select2 as vuejs is working with navite html.

I am using this code

Answer 1

By assigning select2 value to vuejs data I am able to fix this problem. I didn't use custom directive here.

var app = new Vue({
  el: '#app',
  data: {
    supplier_id: "niklesh"
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
});

$('#supplier_id').on("change",function(){
    app.supplier_id = $(this).val();
    console.log('Name : '+$(this).val());
});

$('#supplier_id').select2({});

  Name : {{ supplier_id | capitalize }}

    Atul
    Niklesh
    Sachin

Please comment if this is not good way or any better solution you suggest.