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,23 +16,38 @@ 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">
         <template v-for="(field, index) in section.fields" :key="index">
           <template v-if="field.enabled ? field.enabled(values) : true">
-            <label :for="field.key" v-text="field.label" />
+            <label :for="field.key" v-text="field.label"/>
             <Field v-if="field.as == 'NumberBox'" :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props" @update:modelValue="values[field.key] = Number(values[field.key])"/>
             <Field v-else :name="field.key" :as="field.as" :rules="field.rules" v-bind="field.props"/>
             <ErrorMessage :name="field.key" />
@@ -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>