vue-dropzoneJs uploads 0 data to POST api endpoint but gives 200 oke

Question

Simple form with the image upload and a title / description input

<template>
  <div class="upload-form">
    <form action="api/album" method="POST" enctype="multipart/form-data">
      <div class="form-group">
        <label for="title">Title</label>
        <input
          v-bind="form.title"
          type="text"
          class="form-control"
          id="title"
          required
        />
      </div>
      <div class="form-group">
        <label for="description">description</label>
        <input
          v-bind="form.Description"
          type="text"
          class="form-control"
          id="description"
          required
        />
      </div>

      Upload a cover image here
      <vue-dropzone
        ref="dropzoneJs"
        id="dropzone"
        :options="options"
        v-on:vdropzone-sending="sendingEvent"
      ></vue-dropzone>
      <button
        v-on:click="processQueue"
        id="upload"
        type="submit"
        class="btn btn-primary"
      >
        Upload
      </button>
    </form>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data() {
    return {
      options: {
        url: "http://127.0.0.1:8000/api/album",
        addRemoveLinks: true,
        maxFiles: 1,
        maxFilesize: 4,
        autoProcessQueue: false,
        dictDefaultMessage: '<i class="fas fa-cloud-upload-alt"></i>UPLOAD',
      },
      form: {
        title: "",
        Description: "",
      },
    };
  },
  components: {
    vueDropzone: vueDropzone,
  },

  methods: {
    processQueue() {
      this.$refs.dropzoneJs.processQueue();
    },
    sendingEvent(file, xhr, formData) {
      formData.append("title", this.form.title);
      formData.append("description", this.form.Description);
    },
  },
};
</script>

<style scoped>
#upload {
  margin-top: 5px;
}
.upload-form {
  margin-top: 75px;
}
</style>

Form get's send to laravel backend controller via this route

Route::post('/album', [AlbumController::class, 'store'])->name('album.post');

Method inside of controller just dumps the request variable

public function store(Request $request)
    {
        dd($request);
    }

The upload hits the POST endpoint and prints out the $request variable, but no title, description or image are inside.

Answer 1

After some trial and error I have found a solution

1: I removed the form tag

2: I used v-model instead of v-bind

3: changed the URL inside of my options object to api/album

these changes seem to have fixed my issue and dd($request) now prints the title / description and the file