fix: check if the target is pojo before attempted merge (#4615)

.changeset/fluffy-icons-eat.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+"fix: check if both source and target objects are POJOs"

packages/shared/utils.ts

@@ -51,7 +51,7 @@ export function isPlainObject(value: any) {
 
 export function merge(target: any, source: any) {
   Object.keys(source).forEach(key => {
-    if (isPlainObject(source[key])) {
+    if (isPlainObject(source[key]) && isPlainObject(target[key])) {
       if (!target[key]) {
         target[key] = {};
       }

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

@@ -1398,4 +1398,31 @@ describe('useForm()', () => {
     await flushPromises();
     await expect(form.errors.value.fname).toBe(undefined);
   });
+
+  test('checks if both source and target are POJO before setting properties', async () => {
+    let form!: FormContext<{ file: { name: string; size: number } }>;
+    const f1 = new File([''], 'f1.text');
+    const f2 = { name: 'f2.text', size: 123 };
+
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          initialValues: { file: f1 },
+        });
+
+        form.defineField('file');
+
+        return {};
+      },
+      template: `
+        <div></div>
+      `,
+    });
+
+    await flushPromises();
+    expect(form.values.file).toBeInstanceOf(File);
+    expect(form.values.file).toBe(f1);
+    form.setValues({ file: f2 });
+    expect(form.values.file).toEqual(f2);
+  });
 });