Tengo un componente de carga de archivos donde puedo eliminar los archivos seleccionados, probé this.files.splice(index, 1); y this.$delete(this.files, index);

si vuelvo a agregar un archivo eliminado con this.files = [...this.$refs.fileUpload.files]; , no se agrega en la matriz de archivos. Si selecciono un archivo diferente, aparece, así que supongo que se trata de un problema de reactividad.

El componente simplificado:

 <template> <div class="file-upload-component"> <div class="upload-area" > <label for="fileUpload" class="component-info"> <span>Add files</span> </label> <input type="file" style="display:none" @change="addFiles" ref="fileUpload" id="fileUpload" /> <div class="file-list"> <div class="file-list__file" v-for="(file, index) in files" :key="index"> <span>{{ file.name }}</span> <button @click="remove(index)" class="cancel" > remove </button> </div> </div> </div> </div> </template> <script> export default { data() { return { files: [], }; }, methods: { addFiles() { this.files = [...this.$refs.fileUpload.files]; }, remove(i) { this.$delete(this.files, i); }, }, }; </script> <style lang="scss" scoped> .upload-area { width: 100%; height: 356px; .component-info { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .file-list { margin: 20px; .cancel { margin-left: 10px; } } } </style>

Lo extraño es que así funciona en Firefox.