如何在Vue中禁止HTML输入框输入首个空格？

我有一个Vue文本输入组件，需求是禁止输入首个空格——即用户输入空格时，输入框需保持为空。

最初的实现代码无法生效，推测原因是Vue检测到msg值未发生变化，因此拒绝重新渲染组件。后续尝试用$forceUpdate强制更新组件，虽能生效但仅作用于当前组件，无法更新子组件；尝试修改组件key重新渲染子树，却会丢失输入框焦点。React版本的实现可正常工作，现寻求简洁、符合最佳实践的解决方案。

最初的Vue实现（无效） #

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') value = '';
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

尝试用$forceUpdate的实现（存在局限） #

<script setup>
import {getCurrentInstance} from 'vue'
import { ref } from 'vue'

const msg = ref('')

const instance = getCurrentInstance();

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') {
    value = '';
    msg.value = value;    
    instance?.proxy?.$forceUpdate();
    return;
  }
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

正常工作的React版本 #

import React, {useState} from 'react';

export function App(props) {
  const [value, setValue] = useState('');

  function onInput(e) {
    let v = e.target.value;
    if (v === ' ') v = '';
    setValue(v);
  }

  return (
    <div className='App'>
      <input value={value} onInput={onInput} />
    </div>
  );
}

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