vuetify3 vee-validate Global Validators issue

Question

I use vee-validate with vuetify3 , I use Global Validators like laravel way but tried docs way and it works but it show value in field only when focusing it

By the way I tried it on html input tag and validations works good , so I think issue with vuetify

this my code with notes for each way

<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 }"
          >
            <!-- works when I use v-model in VeeField and v-text-field  -->
            <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 }"
          >
            <!-- works but It show value only when focuse on component other wiset it will looks empty   -->
            <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 }"
            >
              <!-- validation always be invalid , that means it dose not work   -->
              <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>

I found workaround solution as in code first way but I am not comfortable for it

last workaround ^_^ using :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>