Rework NiceForm to get initial Values working

client/src/components/NiceForm.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useForm } from 'vee-validate';
 
 const props = defineModel<{
-  title: string
-  validationSchema: Record<string, string | Function>,
+  title?: string
+  validationSchema?: Record<string, string | Function>,
   sections: {
     title: string
     fields: {
@@ -15,17 +16,32 @@ const props = defineModel<{
       rules?: (value: any) => true | string,
     }[],
   }[],
-  modelValue: any,
+  initialValues: any,
   submit: (value: any) => boolean,
   discard: () => void,
 }>();
 
-let { sections, submit, discard, validationSchema } = $(props);
+let { sections, submit, discard, validationSchema, initialValues } = $(props);
+
+let { setValues, handleSubmit, values } = useForm({
+  initialValues: initialValues,
+  validationSchema: validationSchema,
+});
+
+const onSubmit = handleSubmit(values => {
+  submit(values);
+});
+
+// idk why this is needed
+Object.assign(values, initialValues);
+onMounted(async() => {
+  setValues(initialValues);
+});
 
 </script>
 
 <template>
-  <ValidationForm as="div" v-slot="{ values, handleSubmit }" @submit="submit" :validationSchema="validationSchema">
+  <div>
     <template v-for="(section, index) in sections" :key="index">
       <h4 v-if="section.title">{{ section.title }}</h4>
       <div class="section">
@@ -41,13 +57,13 @@ let { sections, submit, discard, validationSchema } = $(props);
     </template>
     <div class="actions">
       <div class="flex-grow"/>
-      <button @click="handleSubmit($event, submit)">Submit</button>
+      <button @click="onSubmit">Submit</button>
       <div class="space"/>
       <button @click="discard">Discard</button>
       <div class="flex-grow"/>
     </div>
     <p>{{ values }}</p>
-  </ValidationForm>
+  </div>
 </template>
 
 <style scoped>