docs: correct examples

Author: logaretm

docs/src/components/Repl.vue

@@ -41,7 +41,7 @@ store.setImportMap({
     toposort: 'https://esm-repo.netlify.app/topsort.esm.js',
     yup: 'https://unpkg.com/[email protected]/index.esm.js',
     zod: 'https://unpkg.com/[email protected]/lib/index.mjs',
-    valibot: 'https://unpkg.com/browse/valibot@0.7.0/dist/index.js',
+    valibot: 'https://unpkg.com/valibot@0.21.0/dist/index.js',
     '@vue/devtools-api': 'https://unpkg.com/@vue/[email protected]/lib/esm/index.js',
     vue: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.prod.js`,
   },

docs/src/components/examples/CompositionComponentBindsBasic03.vue

@@ -10,7 +10,7 @@ const { values, errors, defineField } = useForm({
 });
 
 const [email, emailProps] = defineField('email', {
-  validateOnValueUpdate: false,
+  validateOnModelUpdate: false,
 });
 </script>
 

docs/src/components/examples/CompositionHandlingForms08.vue

@@ -2,7 +2,7 @@
 import { useForm } from 'vee-validate';
 import * as yup from 'yup';
 
-const { resetForm, defineField, meta } = useForm({
+const { resetForm, defineField, meta, errors } = useForm({
   validationSchema: yup.object({
     name: yup.string().required(),
     email: yup.string().email().required(),
@@ -16,7 +16,7 @@ const [password, passwordAttrs] = defineField('password');
 </script>
 
 <template>
-  <form @submit="">
+  <form>
     <input v-model="name" v-bind="nameAttrs" />
     {{ errors.name }}
 
@@ -26,13 +26,15 @@ const [password, passwordAttrs] = defineField('password');
     <input type="password" v-model="password" v-bind="passwordAttrs" />
     {{ errors.password }}
 
-    <button type="button" @click="resetForm()">Reset</button>
-    <button
-      type="button"
-      @click="resetForm({ values: { email: '[email protected]' }, errors: { password: 'Password taken 😜' } })"
-    >
-      Reset to specific state
-    </button>
+    <div>
+      <button type="button" @click="resetForm()">Reset</button>
+      <button
+        type="button"
+        @click="resetForm({ values: { email: '[email protected]' }, errors: { password: 'Password taken :-)' } })"
+      >
+        Reset to specific state
+      </button>
+    </div>
 
     <pre>{{ meta }}</pre>
   </form>

docs/src/components/examples/CompositionValibotBasic.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/valibot';
-import { email, string, minLength, object } from 'valibot';
+import { email as emailValidator, string, minLength, object } from 'valibot';
 
 const { errors, defineField } = useForm({
   validationSchema: toTypedSchema(
     object({
-      email: string([minLength(1, 'Email is required'), email()]),
+      email: string([minLength(1, 'Email is required'), emailValidator()]),
       password: string([minLength(6, 'password too short')]),
     }),
   ),