Custom Vue select component not updating selected option when v-model value changed
Computed Setter
For v-model, use a computed setter with v-model instead of value, to avoid mutating the prop.You can get rid of the change listener.
<select v-model="model"> <option v-for="option in options" :value="option.value">{{ option.text }}</option></select>Vue.component('dynamic-select-ex1', { template: '#dynamic-select-template', props: ['value', 'options'], computed: { model: { get() { return this.value }, set(value) { this.$emit('input', value) } } }})When the computed value is accessed, it returns the prop value, and when it's set, it emits instead.
Or :value, @input, and $event.target.value
Another option is to make a 1-way binding of value and $emit from the template:
<select :value="value" @input="$emit('input', $event.target.value)"> <option v-for="option in options" :value="option.value">{{ option.text }}</option></select>Vue.component('dynamic-select-ex1', { template: '#dynamic-select-template', props: ['value', 'options'],})