Vue3 select绑定问题：选中值不在新选项列表时无法切换至默认空选项

问题根因 #

触发is_min_length更新后，Vue的响应式更新是批量执行的：会先计算新的options_filtered，再更新DOM里的select选项列表，最后才会执行flush为post的监听回调。你原来的watch默认是pre模式，在DOM更新前就把option_selected设为空了，这时候select的DOM选项里还没删掉option 2、也没对应上为空的选项值，就会出现显示空白的情况。
其他有效值可以正常响应是因为不管新旧选项列表里都存在对应值，不受时序问题影响。

修复方案 #

修改select_options组件内的is_min_length监听配置，指定flush: 'post'让回调在DOM更新完成后执行即可，不需要额外加setTimeout：

// select_options组件内的watch修改如下
watch: {
  is_min_length: {
    handler() {
      const is_presented = this.options_filtered.some(option => option.value === this.option_selected)
      if (!is_presented) {
        this.$emit("update:option_selected", "")
      }
    },
    flush: 'post' // 等待DOM更新完成后再执行回调
  }
}

修改完成后测试复现场景：先选中option 2，再在输入框输入3个字符，select会自动切换到值为空的「Select option」选项，和绑定的option_selected变量值完全同步。

内容的提问来源于stack exchange，提问作者DarckBlezzer