[Vuejs]-Vue filepond component multiple instance on the same page causing input event emitter is saving in last component's v-model

You can have different ids by adding the "addFile" event in the FilePond component

FilePond Component :

<FilePond
  :id="id"
  name="files"
  ref="pond"
  v-bind="$attrs"
  v-on:activatefile="onActivateFileClick"
  v-on:removefile="onRemoveFileClick"
  v-on:addfile="setOptionsOnAddFile"
/>

setOptionsOnAddFile Method :

setOptionsOnAddFile() {
  setOptions({
    server: {
      url: FILE_UPLOAD_SERVER_URL,
      process: {
        url:
          process.env.api.file.uploadFile +
          "?folderName=" +
          this.id +
          "&&id=" +
          this.$store.state.fileId,
        method: "POST",
        headers: {
          Authorization: "Bearer " + cookies.get("x-access-token"),
        },
        onerror: (response) => response.data,
        onload: (response) => {
          response = JSON.parse(response);
          //  this emit is storing value into last component`s v-model in a page.
          this.$store.commit("SET_FILES", response.data.filesUploaded);
          this.$emit("input", [
            // ...this.value,
            ...response.data.filesUploaded,
          ]);
          this.$store.commit("SET_FILE_ID", "");
          return response.data.filesUploaded[0];
        },
      },
    },
  });
},

So, you can use multiple file-pond component on same page with different ids to upload

You need to call setOptions on the file-pond instances instead of calling it globally.

Here is my solution to this problem:

// in your template
<file-pond
    ref="pond"
    @init="init"
    ....
/>

// in your script
const pond = ref(null);

function init() {
    pond.value.addFile(/* path to your file */);

    pond.value._pond.setOptions({
        ...
    });
}