VueJS: Input file selection event not firing upon selecting the same file

Question

How can we file input detect change on SAME file input in Vue Js

<input ref="imageUploader" type="file" @change="uploadImageFile">

Answer 1

We can add @click event and then clear the value of the file input

<template>
    ....
        <input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile">
    ....
</template>

<script>
    export default {
        methods: {
            resetImageUploader() {
                this.$refs.imageUploader.value = '';
            },
            uploadImageFile() {
                ....
            }
        }
    }
</script>

Answer 2

Same thing as @zubair's answer but for vue 3 and a bit more convenient:

<input type="file" @change="renderImage($event)" @click="$event.target.value=''">