I am trying to upload multiple files with laravel and vue 3. I have 3 attributes user_files, book_files[]

 <input
            type="file"
            class="form-control"
            name="user_files[]"
            @change="onFileChange"
            multiple
            id="user_files"
            placeholder="User details"
          />
        </div>

  const form = reactive({
  first_name: "",",
  hourly_rate: 0,
  user_files: [],
  book_files: []
  user_name: "",
  course_date: "",
});


const onFileChange = (e) => {
  for (let i = 0; i < e.target.files.length; i++) {
    form.user_files.push(e.target.files[i]);
  }
 };

const { errors, storeUser } = useUsers();

const saveUser = async () => {
  await storeUser({ ...form });
};

return {
  form,
  saveUser,
  onFileChange,
};

How can I rewrite the function onFileChange for multiple attributes, right now it is only for `user_files.

 const storeUser = async (data, medical_file) => {  
let formData = new FormData();
(data.user_files ?? []).forEach((file, key) => {
  formData.append("user_files[]", file);
});;

    errors.value = "";
    try {
      const status = await http.post("/api/users", formData, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });

Also in above js function, I need to append rest of the data like first_name, user_name and others into the formData as well, and loop over the other files along with user_files. How should I do that (data.medical_file ?? []).forEach((file, key) => { formData.append("medical_file[]", file); });; in this function.