Vue-select: Select is not updating when v-model was changed

Created on 6 Aug 2019 · 2Comments · Source: sagalbot/vue-select

Describe the bug
Select is not updated when the v-model variable was changed, at least when we have a custom reduce and object type options.

To Reproduce
Steps to reproduce the behavior:

Declare a variable entity in data()
Use entity as v-model or :value
Update entity in a method of current component
Select was not updated

Expected behavior
Select should be updated when we change the entity value.

Screenshots

Desktop (please complete the following information):

OS: MacOs Mojave
Browser Chrome
Version 75

Additional context

<template>
  <v-select
    :reduce="item => item.id"
    label="label"
    :options="entities"
    v-model="entity"
  >
  </v-select>
</template>

<script>
  export default {
    name: 'Dropdown',
    data () {
      return {
        entity: null,
        entities: []
      }
    },
    methods: {
      async handleSearch (search, loading) {
        loading(true)
        try {
          const res = await this.$http.get('persons', {
            params: {
              q: search
            }
          })
          const { data } = res
          this.items = data
        } catch (e) {
        }

        loading(false)
      },     
    },
    beforeMount () {
      this.entities = [
        {
          id: 1,
          label: 'a'
        }, {
          id: 2,
          label: 'b'
        },
      ]
      setTimeout(e => {
        console.log('entity value before change', this.entity)

        this.entity = 2
        console.log('entity value after change', this.entity)
      }, 2000)

    }
  }
</script>

This issues was not in 2.6 version.

As a temporary solution I added a watcher on the value https://github.com/tikagnus/vue-select/commit/360b0b427d0d984c3eb4b1e4b82a70f289917507

Source