[v4] initial value with v-model not displayed in v4.1.4

[cexbrayat]

Versions

• vee-validate: 4.1.4
• vue: 3.0.5

Describe the bug

Consider a simple form using Fiel with v-model:

<template>
  <h1>Register</h1>
  <Form>
    <Field as="input" rules="required" name="login" v-model="user.name"/>
    <ErrorMessage name="login" as="div"/>
  </Form>

</template>

<script>
import { reactive } from 'vue';
import { defineRule, ErrorMessage, Form, Field } from 'vee-validate'
import { required } from '@vee-validate/rules'

defineRule('required', required);

export default {
  components: {
    Form,
    Field,
    ErrorMessage
  },

  setup() {
    const user = reactive({ name: 'ced' });
    return { user }
  }
}
</script>

When bumping to v4.1.4, the initial value is no longer displayed in the input.

To reproduce

Steps to reproduce the behavior: https://github.com/cexbrayat/vee-infinite-loop/pull/7 yarn and yarn dev to witness the issue.

Rollback to v4.1.3, and run again to see that the initial value is displayed

Expected behavior

The v-model value should be displayed.

[logaretm]

Looks like it was caused by the changes in 504f30b

Just tagged 4.1.5 to fix it.

[diavrank]

I have the same issue with this:

<Field v-model="user.profile.name" type="text"  name="name" v-slot="{ field, errors }" rules="required">
                    <v-text-field v-bind="field" label="Full name"
                                  :error-messages="errors">
                    </v-text-field>
                  </Field>

the field is not showing the initial value until I put the mouse over it. Anyone knows how to fix it?

[farhad999]

I have the same issue with this:

<Field v-model="user.profile.name" type="text"  name="name" v-slot="{ field, errors }" rules="required">
                    <v-text-field v-bind="field" label="Full name"
                                  :error-messages="errors">
                    </v-text-field>
                  </Field>

the field is not showing the initial value until I put the mouse over it. Anyone knows how to fix it?

I was stuck in this issue for a long time. You can solve this issue in following way

<Field v-model="user.profile.name" type="text"  name="name" v-slot="{ field, errors, value }" rules="required">
                    <v-text-field v-bind="field" :model-value="value" label="Full name"
                                  :error-messages="errors">
                    </v-text-field>
                  </Field>