fix: refs #8217 update FormModel to use toRef for mapper and improve data handling

src/components/FormModel.vue

@@ -1,6 +1,15 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch, nextTick, useAttrs } from 'vue';
+import {
+    onMounted,
+    onUnmounted,
+    computed,
+    ref,
+    watch,
+    nextTick,
+    useAttrs,
+    toRef,
+} from 'vue';
 import { onBeforeRouteLeave, useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -140,6 +149,7 @@ const submitForm = async (evt) => {
         await save(evt);
     }
 };
+const mapper = toRef($props, 'mapper');
 
 onMounted(async () => {
     nextTick(() => (componentIsRendered.value = true));
@@ -247,7 +257,9 @@ async function create() {
 
 async function update() {
     formData.value = trimData(formData.value);
-    const body = $props.mapper(originalData.value, formData.value);
+    const body = mapper.value
+        ? mapper.value(originalData.value, formData.value)
+        : formData.value;
     const url = $props.urlUpdate || $props.url || arrayData.store.url;
     const response = await Promise.resolve(
         $props.saveFn ? $props.saveFn(body) : axios.patch(url, body),

src/pages/Item/Card/ItemBotanical.vue

@@ -39,6 +39,7 @@ const entityId = computed(() => {
             where: { itemFk: entityId },
         }"
         @on-fetch="(data) => (itemBotanicalsForm = data)"
+        :mapper="(_, data) => data"
     >
         <template #form="{ data }">
             <VnRow>