Cannot trigger data selected in vue-select when show record

Question

I am using vue-select. I select province_id then create record success, but when show record, I cannot trigger data selected to select2.

<v-select
  v-model="form.province_id"
  name="province_id"
  :options="provinces"
  :reduce="province => province.province_id" 
  label="name"
  :clearable="false"
  :searchable="true" />

import vSelect from 'vue-select'

export default {
  components: { 'v-select': vSelect },
  data () {
    const form = {
      province_id: ''
    }
    return {
      provinces: []
    }
  },
}```

Answer 1

Your data declaration is wrong, you need to return form inside the returned object.

import vSelect from 'vue-select'

export default {
  components: { 'v-select': vSelect },
  data () {
    const 
    return {
      provinces: [],
      form: {
          province_id: undefined
      }
    }
  },
}

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data() {
    return {
      provinces: [
        { name: 'province 1', province_id: 'p_1' },
        { name: 'province 2', province_id: 'p_2' },
        { name: 'province 3', province_id: 'p_3' },
      ],
      form: {
        province_id: ''
      }
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">
   Selected {{ form.province_id }}
  <v-select
    v-model="form.province_id"
    name="province_id"
    :options="provinces"
    :reduce="province => province.province_id" 
    label="name"
    :clearable="false"
    :searchable="true" />
</div>