fix: resetField respects current reactive initial value

.changeset/fix-4827-reactive-resetfield.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+Fix resetField to use current reactive initial value instead of stale value (#4827)

packages/vee-validate/src/useFieldState.ts

@@ -126,6 +126,11 @@ export function _useFieldValue<TValue = unknown>(
 
   function resolveInitialValue() {
     if (!form) {
+      // If the original modelValue is a ref, read from it directly to maintain reactivity
+      if (isRef(modelValue)) {
+        return modelValue.value as TValue;
+      }
+
       return unref(modelRef) as TValue;
     }
 
@@ -160,6 +165,15 @@ export function _useFieldValue<TValue = unknown>(
   // #3429
   const currentValue = resolveModelValue(modelValue, form, initialValue, path);
   form.stageInitialValue(unref(path), currentValue, true);
+
+  // If the modelValue is a ref, watch it and update the form's initial value when it changes
+  // This ensures resetField uses the current reactive initial value (#4827)
+  if (isRef(modelValue)) {
+    watch(modelValue, newVal => {
+      form.setFieldInitialValue(unref(path), newVal as any, true);
+    });
+  }
+
   // otherwise use a computed setter that triggers the `setFieldValue`
   const value = computed<TValue>({
     get() {

packages/vee-validate/tests/useField.spec.ts

@@ -1059,4 +1059,69 @@ describe('useField()', () => {
 
     expect(form.values.field).toEqual('test');
   });
+
+  // #4827
+  test('resetField should use current reactive initial value (without form)', async () => {
+    let field!: FieldContext;
+    const initialValue = ref('before change');
+
+    mountWithHoc({
+      setup() {
+        field = useField('field', undefined, { initialValue });
+
+        return {};
+      },
+      template: '<div></div>',
+    });
+
+    await flushPromises();
+    expect(field.value.value).toBe('before change');
+
+    // Change the reactive initial value
+    initialValue.value = 'after change';
+    await flushPromises();
+
+    // Change the field's current value to something else
+    field.value.value = 'some random value';
+    await flushPromises();
+
+    // Reset field should use the new reactive initial value
+    field.resetField();
+    await flushPromises();
+
+    expect(field.value.value).toBe('after change');
+  });
+
+  // #4827
+  test('resetField should use current reactive initial value (with form)', async () => {
+    let field!: FieldContext;
+    const initialValue = ref('before change');
+
+    mountWithHoc({
+      setup() {
+        useForm();
+        field = useField('field', undefined, { initialValue });
+
+        return {};
+      },
+      template: '<div></div>',
+    });
+
+    await flushPromises();
+    expect(field.value.value).toBe('before change');
+
+    // Change the reactive initial value
+    initialValue.value = 'after change';
+    await flushPromises();
+
+    // Change the field's current value to something else
+    field.value.value = 'some random value';
+    await flushPromises();
+
+    // Reset field should use the new reactive initial value
+    field.resetField();
+    await flushPromises();
+
+    expect(field.value.value).toBe('after change');
+  });
 });