`超级大BUG` `vue3` input 组件有问题

[tesla-cat]

<script setup>
const val = defineModel()
</script>

<template>
  <div class="f1 col">
    <div>{{ { type: typeof val, val: val.slice(0, 10) } }}</div>
    <input
      class="input1"
      :value="String(val)"
      @input="(e) => (val = e.target.value)"
    />
  </div>
</template>

• 有时候正常工作: val 是 hello, 输入框也显示 hello

• 有时候不能: val 是 hello, 但输入框为空 !!!!

• 版本：

"vue": "^3.5.13"
"webpack": "^5.96.1"
"mp-webpack-plugin": "^1.6.6"

[tesla-cat]

• 做了很多尝试 最后这么做才解决

<script setup>
import { onMounted, ref, watch } from 'vue'

defineProps(['ph'])
const val = defineModel()
const elm = ref(null)

watch(val, update)
onMounted(() => update(false))

function update(focus = true) {
  const e = elm.value
  if (focus) e.focus()
  e._oldValues = { focus: true }
  e.value = val.value || ''
}
</script>

<template>
  <input
    ref="elm"
    class="input1"
    :placeholder="ph"
    @input="(e) => (val = e.target.value)"
  />
</template>

[JuneAndGreen]

我在 demo26 补了下 case，没有复现。话说这里为什么要直接赋值给 value，而不是用 v-model ？