get vue-select value not working

Question

I am trying to get the selected value from vue-select but have used all methods and searched for help but can this to work, I also having the alert triggered when the page loads

Vue.component('v-select', VueSelect.VueSelect)
new Vue({
  el: '#app',
  data: {
    options: [      
      {id: 1, label: 'foo'},
      {id: 3, label: 'bar'},
      {id: 2, label: 'baz'},
    ],
    selected: '',
  },
  methods: {
    runme: function() {
      alert(this.selected);
    }
  }
})

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  color: #2c3e5099;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
  -moz-text-size-adjust: none;
}

#app {
  max-width: 30em;
  margin: 1em auto;
}

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<div id="app">
  <h1>Vue Select - Using v-model</h1>
  <v-select v-model="selected" :on-change="runme" :options="options"></v-select>  
</div>

Answer 1

vue-select author here. The on-change callback will be deprecated in v2.5.0 and removed in v2.6.0. Here's the prop from the v2.4.0 source:

/**
 * An optional callback function that is called  
 * each time the selected value(s) change.
 *
 * @type {Function}
 * @param {Object || String} val
 */
onChange: {
  type: Function,
  default: function (val) {
    this.$emit('input', val)
  }
}

As Bob Dust explained, the key here is that onChange calls this.$emit('input',val), which is what Vue hooks into to provide the v-model syntax. If the event is not emitted, Vue is unaware of the change.

If you need v-model and also want to take an action anytime the value changes, listening for the @input event is the best option:

<v-select v-model="selected" @input="runme" :options="options"></v-select>