Select2 with ajax remote data options component in Vuejs - arrays

Question

I wanna to use select2 with ajax remote data options in Vuejs 2.x. In vuejs.org website located a sample for select2 component that work as static, but I need to select2 with this specific for my project. How to convert JSFIDDLE Example to select2 that call an API with keyboard type.
In jQuery Select2 use this code for ajax call:
$('.js-data-example-ajax').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
dataType: 'json'
// Additional AJAX parameters go here; see the end of this chapter for the full code of this example
}
});

Answer 1

Here is component that is working for me. Reference to their select2
https://v2.vuejs.org/v2/examples/select2.html
The gotcha for me was using change.select2 instead of triggering change event in the watch. change event causes infinite loop.
Your callback/ajax URL will need to return data with at least .id and .text properties. See this URL for proper format https://select2.org/data-sources/formats
<select2 v-model="member" name="member" callback="/res/member/select2.php" placeholder="Type a name"></select2>
Vue.component('select2', {
props: ['name', 'value', 'required', 'callback', 'placeholder'],
template: '<select :name="name" v-bind:class="{required: required}" class="vue-select2"></select>',
watch : {
value : function(value) {
$(this.$el).empty().append('<option value="' + value.id + '">' + value.text +'</option>').trigger('change.select2');
}
},
mounted: function() {
var that = this;
var options = {
width: '100%',
placeholder: this.placeholder,
allowClear: true,
ajax: {
url: this.callback,
dataType: 'json'
}
};
$(this.$el).select2(options);
$(this.$el).on('change', function() {
var item = $(this).select2('data')[0];
that.$emit('input', item);
});
}
});