Change value without trigger watch again - vuejs2

Question

I'm trying to find a workaround to the problem of changing 2-way binding inside a watch of the same property avoiding calling the watch again. for example:
<select v-model="language">
<option ... />
</select>
watch:{
language(newVal // 'fr' , oldVal // 'en'){
if(condition){
// do something
} else {
// roll back to the old language
this.language = "en" // will call watch again.
// Looking for something like this:
// Vue.set(this, 'language', 'en', { watch: false })
}
}
}
I thought about using #change but it won't help cause I have to set the value again with an object and not a plain value.
I know I can use other 2-way property and use it as a flag, but I look for something more elegant.

Answer 1

Why roll back the user's selection in the first place? You can use a computed property to provide a filtered list of valid options to provide a better user experience.
The example below will only let you select en if the condition checkbox is true.
Vue.config.productionTip = false;
new Vue({
el: '#app',
template: `
<div>
<p>Condition: <input type="checkbox" v-model="condition" /></p>
<p>Selection: {{selection}}</p>
<select v-model="selection">
<option v-for="opt in filteredOptions" :key="opt.value" :value="opt.value">{{opt.label}}</option>
</select>
</div>
`,
data: () => ({
selection: undefined,
condition: true,
options: [
{ label: 'English', value: 'en' },
{ label: 'French', value: 'fr' },
{ label: 'Spanish', value: 'es' },
],
}),
computed: {
filteredOptions() {
return this.condition ? this.options.filter(x => x.value === 'en') : this.options;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>