How to reset change event handler?

Question

I have a change event that enable me to upload images.

<input type="file" @change="onFileChange" multiple>

   const onFileChange = (e) => {
      for (let i = 0; i < e.target.files.length; i++) {
        const file = e.target.files[i]
        imageList.value.push(file)
        localUrls.value.push(URL.createObjectURL(file))
      }

My problem is after I add image 1 2 and 3. Then proceed to delete image 1 2 and 3. And when I try to add image 1 2 and 3 it will not work because I realize that my change event handler thinks that nothing has changed because when I add image 1 2 and 3 again, it remembers when I added image 1 2 and 3 previously and thus does not update.

Is there a way for me to reset my change event handler to forget its previous values that it was holding? Thanks!

The complete version of my code is below

<template>
  <h2>Add your product</h2>
  <form @submit.prevent="handleSubmit">
    <label>Product Name</label>
    <input type="text" placeholder="Name of Product" v-model="productName">
    <label>Quantity</label>
    <input type="number" placeholder="Quantity" v-model="productQuantity">
    <label>Description</label>
    <textarea placeholder="Description" v-model="productDescription"></textarea>
    <label>Tags</label>
    <input type="text" placeholder="tags, to be changed" v-model="productTags">
    <label>Photos</label>
    <input type="file" @change="onFileChange" multiple>
    <div class="container">
      <div v-for="image in localUrls" :key="image">
        <ProductImage :image="image" @removeImage="removeImage" />
      </div>
    </div>
    <p v-if="error">{{ error }}</p>
    <button>Submit</button>
  </form>
</template>

<script>
import { ref } from '@vue/reactivity'
import AddProduct from "../../composables/addProduct.js"
import { timestamp } from '../../firebase/config.js'
import ProductImage from './ProductImage.vue'

export default {
  components: {
    ProductImage
  },
  setup() {
    // Handling Images
    const imageList = ref([]);
    const localUrls = ref([]);

    const removeImage = (imageForRemoval) => {
      const index = localUrls.value.findIndex(el => (el == imageForRemoval))
      imageList.value.splice(index, 1)
      localUrls.value.splice(index, 1)
    }

    const onFileChange = (e) => {
      for (let i = 0; i < e.target.files.length; i++) {
        const file = e.target.files[i]
        imageList.value.push(file)
        localUrls.value.push(URL.createObjectURL(file))
      }
    }

    const productName = ref('')
    const productQuantity = ref('')
    const productDescription = ref('')
    const productTags = ref('')
    const { uploadProduct, error } = AddProduct();

    // Uploading Data in Field to Database
    const handleSubmit = async() => {
      var productData = {
        product: productName.value, 
        productQuantity: productQuantity.value, 
        productDescription: productDescription.value,
        productTags: productTags.value,
        createdAt: timestamp
      };
      await uploadProduct(productData)
      if (error.value == null) {
        productName.value = ''
        productQuantity.value = ''
        productDescription.value = ''
        productTags.value = ''
      }
    }
    
    return {
      productName,
      productQuantity,
      productDescription,
      productTags,
      handleSubmit,
      error,
      onFileChange,
      localUrls,
      removeImage,
    }
  }


}
</script>