diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
index d07f9c04d..301db2ab0 100644
--- a/packages/vee-validate/src/Field.ts
+++ b/packages/vee-validate/src/Field.ts
@@ -168,7 +168,7 @@ export const Field = defineComponent({
}
if (newModelValue !== applyModifiers(value.value, props.modelModifiers)) {
- value.value = newModelValue;
+ value.value = (newModelValue as any) === IS_ABSENT ? undefined : newModelValue;
validateField();
}
});
diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts
index c80de9566..07c3fe0bc 100644
--- a/packages/vee-validate/tests/Field.spec.ts
+++ b/packages/vee-validate/tests/Field.spec.ts
@@ -1038,4 +1038,28 @@ describe('', () => {
await flushPromises();
expect(value.value).toBe(false);
});
+
+ // #3468
+ test('should avoid setting the absent value to Vue', async () => {
+ const form = ref({});
+ const wrapper = mountWithHoc({
+ setup() {
+ return {
+ form,
+ };
+ },
+ template: `
+
+ `,
+ });
+
+ await flushPromises();
+ const input = document.querySelector('input') as HTMLInputElement;
+ setValue(input, '1234');
+ await flushPromises();
+ expect(input.value).toBe('1234');
+ form.value = {};
+ await flushPromises();
+ expect(input.value).toBe('');
+ });
});