vue.js - vuetify v-file-input not select file the first time

Question

I am using v-file-input to select file for uploading. The issue I am facing is that the file is not selected the first time. The dialog from where file is to be selected reopens then I have to select the file again and then it gets selected. Below is my code. Please help me find where I am going wrong. I am using vuetify 2.3.10

<v-file-input
 placeholder="Upload Document"
 required
 :rules="uploadDocument"
 @change="(file) => onSelection(file)"
>
 <template v-slot:selection="{ text }">
  <v-chip
   small
   label
   color="primary"
  >
   {{ text }}
  </v-chip>
 </template>
</v-file-input>

Answer 1

A v-model on the v-file-input is enough

<template>
    <v-container class="px-0" fluid>
        <v-file-input placeholder="Upload Document" required v-model="file" @emptied="file = null">
            <template v-slot:selection="{ text }">
                <v-chip small label color="primary">{{ text }}</v-chip>
            </template>
        </v-file-input>
        Selected filename: {{file? file.name : ''}}
    </v-container>
</template>

<script>
    export default {
        props: ["car"],
        data() {
            return {
                file: null,
            }
        },

        methods: {
        },
    };
</script>

Good luck.