Vue.js Vuetify v-file-input with required rule shows required error before a file is even selected

Now an error is shown immediately after the input is clicked, before any file has been selected.
This is misleading and confusing.

QUESTION
How to change rules to show an error only when the upload form is cancelled and no file is selected?

Code example → https://codepen.io/lisymcaydnlb/pen/mdEWPow
Image example ↓

HTML

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-file-input
                  label="File"
                  :rules="[v => !!v || 'File is mandatory']"
                  show-size
                  truncate-length="100"
                  append-icon="attach_file"
              ></v-file-input>
      </v-container>
    </v-content>
  </v-app>
</div>

JS

Vue.use(Vuetify);
const vuetify = new Vuetify({
});

new Vue({
  el: '#app',
  vuetify: vuetify,
})