docs: added entry for setting initial values async

Author: logaretm

docs/src/components/examples/CompositionHandlingForms14.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useForm } from 'vee-validate';
+import * as yup from 'yup';
+
+/**
+ * Simulate fetching data from an API
+ */
+async function fetchData() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve({
+        name: 'John Doe',
+        email: '[email protected]',
+      });
+    }, 1500);
+  });
+}
+
+const { errors, resetForm, handleSubmit, defineInputBinds } = useForm({
+  validationSchema: yup.object({
+    email: yup.string().email().required(),
+    name: yup.string().required(),
+  }),
+});
+
+const email = defineInputBinds('email');
+const name = defineInputBinds('name');
+
+// Fetch data on mounted
+onMounted(async () => {
+  const data = await fetchData();
+
+  resetForm({ values: data });
+});
+
+const onSubmit = handleSubmit(values => {
+  alert(JSON.stringify(values, null, 2));
+});
+</script>
+
+<template>
+  <form @submit="onSubmit">
+    <input name="email" v-bind="email" />
+    <span>{{ errors.email }}</span>
+
+    <input name="name" v-bind="name" />
+    <span>{{ errors.name }}</span>
+
+    <button>Submit</button>
+  </form>
+</template>

docs/src/pages/guide/composition-api/handling-forms.mdx

@@ -271,6 +271,14 @@ Here is an example that filters out some noisy initial values when submitting th
 
 <Repl files={{ 'App.vue': 'CompositionHandlingForms12' }} client:only />
 
+### Setting initial values asynchronously
+
+Sometimes your data is fetched asynchronously from an API and you want to set the initial values or the current values after the data is fetched. You can do that by using `resetForm` to set both current and initial data.
+
+<Repl files={{ 'App.vue': 'CompositionHandlingForms14' }} client:only />
+
+You could alternatively use `setValues` but note that `setValues` can trigger validation and do not reset the meta state for the fields like `dirty` or `touched`.
+
 ## Handling Resets
 
 vee-validate also handles form resets in a similar way to submissions. When resetting the form, all fields' errors will be cleared, meta info will be reset to defaults and the values will be reset to their original or initial values.