Vuetify3集成Vee-Validate全局验证器显示异常问题求助

我在Vuetify3中使用Vee-Validate，采用类Laravel的全局验证器方案。实现后遇到两个异常：

• 字段值仅在输入框聚焦时才显示，失焦后为空
• 原生HTML input标签验证功能正常，因此判断问题出在Vuetify组件与Vee-Validate的适配逻辑上

现有代码及三种实现情况 #

<template>
  <VeeForm ref="profileForm" v-slot="{ handleSubmit }">
    <v-form class="px-5" @submit.prevent="handleSubmit(updateProfileOfUser)">
      <v-row class="pt-5">
        <v-col cols="12">
          <VeeField
            v-model="user.name"
            rules="required|min:3|max:32"
            :name="$t('attributes.name')"
            v-slot="{ field, errorMessage }"
          >
            <!-- 正常工作：同时在VeeField和v-text-field上使用v-model -->
            <v-text-field
              v-bind="field"
              v-model.trim="user.name"
              :error-messages="errorMessage"
              :label="$t('attributes.name')"
              counter
              :maxlength="32"
            />
          </VeeField>
        </v-col>
        <v-col cols="12">
          <VeeField
            v-model.trim="user.username"
            rules="required|min:3|max:32"
            :name="$t('attributes.username')"
            v-slot="{ field, errorMessage }"
          >
            <!-- 异常：仅聚焦时显示值，失焦后为空 -->
            <v-text-field
              v-bind="field"
              :error-messages="errorMessage"
              :label="$t('attributes.username')"
              counter
              :maxlength="32"
            />
          </VeeField>
          <v-col cols="12">
            <VeeField
              rules="required|min:3|max:32"
              :name="$t('attributes.username')"
              v-slot="{ errorMessage }"
            >
              <!-- 异常：验证始终失效，完全不工作 -->
              <v-text-field
                v-model.trim="user.username"
                :error-messages="errorMessage"
                :label="$t('attributes.username')"
                counter
                :maxlength="32"
              />
            </VeeField>
        </v-col>
      </v-row>

      <v-divider></v-divider>

      <div class="text-end px-5 py-3">
        <v-btn color="info" min-width="150px" type="submit">
          {{ $t("options.update") }}
        </v-btn>
      </div>
    </v-form>
  </VeeForm>
</template>

临时解决方案 #

目前找到两种临时方案，但体验都不佳：

• 方案一：在VeeField和v-text-field上同时绑定v-model（即第一个正常工作的案例），但存在逻辑冗余
• 方案二：给v-text-field绑定:model-value="field.value"：

<VeeField v-model="user.name" rules="required|min:3|max:32" :name="$t('attributes.name')" v-slot="{ field, errorMessage }">
  <v-text-field v-bind="field" :model-value="field.value" :error-messages="errorMessage" :label="$t('attributes.name')" />
</VeeField>

需求 #

寻求更优雅的解决方案，彻底解决字段值显示异常和验证失效的问题。

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