diff --git a/doc/knob/form/VeeValidateDoc.vue b/doc/knob/form/VeeValidateDoc.vue
index 65aa38d0e..4a190dd91 100644
--- a/doc/knob/form/VeeValidateDoc.vue
+++ b/doc/knob/form/VeeValidateDoc.vue
@@ -19,14 +19,12 @@ import { useField, useForm } from 'vee-validate';
 export default {
     setup() {
         const { handleSubmit, resetForm } = useForm();
-
         const { value, errorMessage } = useField('value', validateField, {
-            validateOnValueUpdate: false
+            validateOnValueUpdate: false,
+            initialValue: 0
         });
         const toast = useToast();
 
-        value.value = 0;
-
         function validateField(value) {
             if (!value) {
                 return 'The value must be greater than zero.';
@@ -38,9 +36,11 @@ export default {
         const onSubmit = handleSubmit((values) => {
             if (values.value > 0) {
                 toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
-                resetForm();
-
-                value.value = 0;
+                resetForm({
+                    values: {
+                        value: 0
+                    }
+                });
             }
         });
 
@@ -79,12 +79,11 @@ export default {
     setup() {
         const { handleSubmit, resetForm } = useForm();
         const { value, errorMessage } = useField('value', validateField, {
-            validateOnValueUpdate: false
+            validateOnValueUpdate: false,
+            initialValue: 0
         });
         const toast = useToast();
 
-        value.value = 0;
-
         function validateField(value) {
             if (!value) {
                 return 'The value must be greater than zero.';
@@ -96,9 +95,11 @@ export default {
         const onSubmit = handleSubmit((values) => {
             if (values.value > 0) {
                 toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
-                resetForm();
-
-                value.value = 0;
+                resetForm({
+                    values: {
+                        value: 0
+                    }
+                });
             }
         });
 
@@ -123,13 +124,12 @@ import { useToast } from 'primevue/usetoast';
 import { useField, useForm } from 'vee-validate';
 
 const { handleSubmit, resetForm } = useForm();
-const { value, errorMessage } = useField('value', validateField,{
-            validateOnValueUpdate: false
-        });
+const { value, errorMessage } = useField('value', validateField, {
+    validateOnValueUpdate: false,
+    initialValue: 0
+});
 const toast = useToast();
 
-value.value = 0;
-
 function validateField(value) {
     if (!value) {
         return 'The value must be greater than zero.';
@@ -141,9 +141,11 @@ function validateField(value) {
 const onSubmit = handleSubmit((values) => {
     if (values.value > 0) {
         toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
-        resetForm();
-
-        value.value = 0;
+        resetForm({
+            values: {
+                value: 0
+            }
+        });
     }
 });
 <\/script>