Büyük bir problemim var, formu doldurup gönderdiğim zaman "payload" boş gidiyor, halbuki vue devtools ile baktığımda pinia store'da her şey yolunda gibi görünüyor..


```
import {cloneDeep, isEqual} from "lodash";
import {Notify} from "quasar";
import {reactive, ref, watch} from "vue";


interface IOptions {
  resetOnSubmit?: boolean;
  showSuccessMessage?: boolean;
  successMessage?: string;
  successMessageIcon?: string;
  successMessageColor?: string;
  successCallback?: () => void;
  showErrorMessage?: boolean;
  errorMessage?: string;
  errorMessageIcon?: string;
  errorMessageColor?: string;
  errorCallback?: () => void;
}

export default function useForm(data: any, api: any, options?: IOptions) {
  console.log("form is starting", data)
  const defaults = cloneDeep(data);
  const processing = ref(false);

  const form: any = reactive({
    ...cloneDeep(defaults),
    isDirty: false,
    errors: {},
    hasErrors: false,
    data() {
      return Object.keys(defaults).reduce((acc: any, key: string) => {
        acc[key] = this[key];
        return acc;
      }, {});
    },
    reset: null,
    post: null,
    put: null,
  });


  console.log("form", form)

  /* Reset */
  const reset = () => {
    Object.assign(form, cloneDeep(defaults));
    form.isDirty = false;
    form.errors = {};
    form.hasErrors = false;
  };
  form.reset = reset;

  /* Post */
  async function request(method = "post") {
    form.errors = {};
    form.hasErrors = false;
    processing.value = true;

    try {
      console.info("control start");
      console.log("form.data()", form.data());
      console.log("cloneDeep(form)", cloneDeep(form));
      console.log("defaults", defaults)
      console.log("data", data)
      console.info("control end");
      await api[method](form.data());

      /* Success Callback */
      if (options?.successCallback) {
        options.successCallback();
      }

      /* Reset */
      if (options?.resetOnSubmit) {
        reset();
      }

      /* Success Message */
      if (options?.showSuccessMessage) {
        Notify.create({
          color: options.successMessageColor || "positive",
          icon: options.successMessageIcon || "check",
          message: options.successMessage,
        });
      }
    } catch (e: any) {
      console.log("hata")
      console.error(e)
      console.log("hata sonu")
      form.errors = e.response.data.errors;
      form.hasErrors = true;

      /* Error Callback */
      if (options?.errorCallback) {
        options.errorCallback();
      }

      /* Error Message */
      if (options?.showErrorMessage) {
        Notify.create({
          color: options.errorMessageColor || "negative",
          icon: options.errorMessageIcon || "warning",
          message: options.errorMessage || e.response.data.message,
        });
      }
    }
  }

  form.post = async () => {
    await request("post");
  };

  form.put = async () => {
    await request("put");
  };

  watch(
    form,
    () => {
      form.isDirty = !isEqual(form.data(), defaults);
    },
    {immediate: true, deep: true},
  );

  return cloneDeep(form);
}
```

```
<script setup>
import NumberInput from "components/NumberInput.vue";
import MainLayout from "layouts/MainLayout.vue";
import {storeToRefs} from "pinia";

import {useFormTest} from "@/stores/formtest";

const formStore = useFormTest();

const {handleCreate} = formStore;
const {form} = storeToRefs(formStore);

// onBeforeUnmount(() => {
//   resetForm();
// });
</script>

<template>
  <main-layout :title="$t('hr.jobDescription.actions.addjobDescription')">
    {{ form }}
    <q-form @submit="handleCreate" class="tw-space-y-8">
      <div class="tw-flex tw-flex-col tw-space-y-4">
        <span class="text-h6">{{
            $t("hr.jobDescription.jobDescriptionGeneralInfo")
          }}</span>
        <q-card class="tw-mb-4 tw-p-6">
          <q-card-section>
            <q-input
              v-model="form.code"
              :label="$t('hr.jobDescription.jobDescriptionCode')"
              :rules="[(val) => val.length > 0 || $t('validation.required')]"
            />
            <q-input
              v-model="form.name"
              :label="$t('hr.jobDescription.jobDescriptionName')"
              :rules="[(val) => val.length > 0 || $t('validation.required')]"
            />
            <q-input
              v-model="form.description"
              :label="$t('hr.jobDescription.jobDescriptionDescription')"
              :rules="[(val) => val.length > 0 || $t('validation.required')]"
            />
            <q-select
              v-model="form.collar_type"
              :options="[{
                id: 'white_collar',
                name: 'Beyaz Yaka'
              }]"
              option-label="name"
              option-value="id"
              emit-value
              map-options
              :label="$t('hr.jobDescription.jobDescriptionCollarType')"
              :rules="[(val) => val.length > 0 || $t('validation.required')]"
            />
            <NumberInput
              v-model.number="form.allocated_qty"
              :label="$t('hr.jobDescription.allocatedjobDescriptionQty')"
              :rules="[
                // val must be a number
                (val) =>
                  val === '' ||
                  (!isNaN(parseFloat(val)) && isFinite(val)) ||
                  $t('validation.number'),
              ]"
            />
            <!--          <q-input v-model="form.allocated_qty" :label="$t('hr.jobDescription.allocatedjobDescriptionQty')"/>-->
          </q-card-section>
        </q-card>
      </div>

      <q-page-sticky
        position="bottom-right"
        :offset="[18, 18]"
        class="tw-p-4 tw-mt-4"
      >
        <q-btn
          fab
          icon="add"
          type="submit"
          color="green"
          :label="$t('actions.add')"
        />
      </q-page-sticky>
    </q-form>
  </main-layout>
</template>

<style lang="scss" scoped>
/* Gerekirse stil ekleyin */
</style>
```

```
import {defineStore} from "pinia";
import {reactive} from "vue";

import {ApiService} from "@/utils/apiService";
import useForm from "@/utils/useForm";

export const useFormTest = defineStore("formTest", () => {
  const jobsAPI = reactive(new ApiService("v1/human-resources/job-descriptions"));

  const form = reactive(useForm({
    code: "",
    name: "",
    description: "",
    collar_type: "white_collar",
    allocated_qty: 5,
  }, jobsAPI, {
    successCallback: () => {
      console.log("successCallback");
    },
    errorCallback: () => {
      console.log("errorCallback");
    },
  }));


  const handleCreate = async () => {
    console.log("handleCreate")
    await form.post();
  }


  return {
    form,
    handleCreate,
  };
});
```