From a720c2444b64d28743ba0500aa970419029352cb Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Thu, 5 Aug 2021 22:19:44 +0200
Subject: [PATCH] fix: ensure to clone user passed values in setters closes
 #3428

---
 packages/vee-validate/src/useField.ts |  5 +++--
 packages/vee-validate/src/useForm.ts  | 23 +++++++++++++----------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
index 04db029fd..04cdb0974 100644
--- a/packages/vee-validate/src/useField.ts
+++ b/packages/vee-validate/src/useField.ts
@@ -13,6 +13,7 @@ import {
   nextTick,
 } from 'vue';
 import { BaseSchema } from 'yup';
+import { klona as deepCopy } from 'klona/lite';
 import isEqual from 'fast-deep-equal/es6';
 import { validate as validateValue } from './validate';
 import {
@@ -404,8 +405,8 @@ function useValidationState<TValue>({
       form.setFieldValue(fieldPath, newValue, { force: true });
       form.setFieldInitialValue(fieldPath, newValue);
     } else {
-      value.value = newValue;
-      initialValueRef.value = newValue;
+      value.value = deepCopy(newValue);
+      initialValueRef.value = deepCopy(newValue);
     }
 
     setErrors(state?.errors || []);
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 7b3fe566a..8dba77771 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/packages/vee-validate/src/useForm.ts
@@ -192,15 +192,18 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
     { force } = { force: false }
   ) {
     const fieldInstance: RegisteredField | undefined = fieldsById.value[field];
+    const clonedValue = deepCopy(value);
     // field wasn't found, create a virtual field as a placeholder
     if (!fieldInstance) {
-      setInPath(formValues, field as string, value);
+      setInPath(formValues, field as string, clonedValue);
       return;
     }
 
     // Multiple checkboxes, and only one of them got updated
     if (Array.isArray(fieldInstance) && fieldInstance[0]?.type === 'checkbox' && !Array.isArray(value)) {
-      const newVal = resolveNextCheckboxValue(getFromPath(formValues, field as string) || [], value, undefined);
+      const newVal = deepCopy(
+        resolveNextCheckboxValue(getFromPath(formValues, field as string) || [], value, undefined)
+      );
       setInPath(formValues, field as string, newVal);
       fieldInstance.forEach(fieldItem => {
         valuesByFid[fieldItem.fid] = newVal;
@@ -211,10 +214,12 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
     let newValue = value;
     // Single Checkbox: toggles the field value unless the field is being reset then force it
     if (!Array.isArray(fieldInstance) && fieldInstance?.type === 'checkbox' && !force) {
-      newValue = resolveNextCheckboxValue<TValues[T]>(
-        getFromPath<TValues[T]>(formValues, field as string) as TValues[T],
-        value as TValues[T],
-        unref(fieldInstance.uncheckedValue) as TValues[T]
+      newValue = deepCopy(
+        resolveNextCheckboxValue<TValues[T]>(
+          getFromPath<TValues[T]>(formValues, field as string) as TValues[T],
+          value as TValues[T],
+          unref(fieldInstance.uncheckedValue) as TValues[T]
+        )
       );
     }
 
@@ -492,7 +497,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
   }
 
   function setFieldInitialValue(path: string, value: unknown) {
-    setInPath(initialValues.value, path, value);
+    setInPath(initialValues.value, path, deepCopy(value));
   }
 
   /**
@@ -679,9 +684,7 @@ function useFormInitialValues<TValues extends Record<string, any>>(
   });
 
   function setInitialValues(values: Partial<TValues>, updateFields = false) {
-    initialValues.value = {
-      ...values,
-    };
+    initialValues.value = deepCopy(values);
 
     if (!updateFields) {
       return;