on-change doesn't work on v-select

Question

I tried to use a v-select who display all countries. so i did :

<v-select on-change="updateCountryId" label="country_name" :options="countries" ></v-select>

it works great and display my countries but the function updateCountryId doesn't seems to work

methods: {
    updateCountryId: function() {
        alert('ok');
    }
}

but i never see the ok

to import vue-select I did :

<script src="/js/vue-select/vue-select.js"> </script>

i use it in a twig file so in my vue-select.js i rewrite what i found on https://unpkg.com/[email protected] but replace the {{ }} by <% %>

ps : i already tried v-on:change, @change and onChange

and my code looks like that (i skip thing i judge useless)

<div id="General">
<div class="form-group">
  <label>Pays :</label>
    <v-select  onChange="updateCountryId" label="country_name" :options="countries" ></v-select>
</div>
.
.
.
<script src="/js/vue-select/vue-select.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script>
  Vue.config.delimiters = ['<%', '%>'];
  Vue.component('v-select', VueSelect.VueSelect);
  var vm = new Vue({
    el: "#General",
    data: {
        countries: [],
    }, 
    filters: {
    },
    methods: {
        updateCountryId: function () {
            console.log('ok');
            alert('ok');
         },`

Answer 1

You are missing the colon :

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',

data: {
  options: ['one', 'two', 'three'],
  selected: ''
},

methods: {
    updateCountryId: function() {
        alert('ok');
    }
}
});

<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>

<div id="app"> 
<v-select :on-change="updateCountryId" label="country_name" :options="options" :searchable="false" ></v-select>
</div>

Update

you need to use unpkg.com/[email protected] because version 1 is not compatible with the current version of Vuejs

Answer 2

Ok, this was really causing me some headache, it seems it has changed again on version 3. Per the documentation (https://vue-select.org/guide/upgrading.html#index-prop-replaced-with-reduce), they removed these 3 functions: onChange, onInput, onSearch in favor of using an event: @input

export default {
    name: 'app',
    methods: {
        changedValue: function() {
            alert("A new value was selected");
        }
    }
}

<v-select 
    options: ['one', 'two', 'three']
    selected: ''
    @input="changedValue" >
</v-select>

Answer 3

you can do this

  <v-select :options="etat_nip" v-model="etat_nip_selected"></v-select>

and add the v-model "etat_nip_selected " in watch like this

watch:{
      'etat_nip_selected'  : function (val, oldval) {
          console.log(val);
      }
    },

for more informations https://v2.vuejs.org/v2/guide/computed.html#Watchers