title: VueJs input file @change does after first call on chrome
body: <p>I have this code </p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;input id="task-message-input-upload" type="file" ref="file" @change="handleFileUpload($event)" /&gt;
  </code></pre>
  
  <h3>Javascript :</h3>
  
  <pre><code>data() {
          return {
              uploadedFiles: [],
              showPercentage: false,
              uploadPercentage: 0,
              file: {},
  
          }
      },
      methods: {
          handleFileUpload(event) {
              this.file = event.target.files[0];
              this.submitFile();
          },
          submitFile() {
              $vm = this;
              this.showPercentage = true;
              let formDataF = new FormData();
              formDataF.append('file', this.file);
              axios.post('/api/v1/savemessagefile',
                      formDataF, {
                          headers: {
                              'Content-Type': 'multipart/form-data'
                          },
                          onUploadProgress: function(progressEvent) {
                                  this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
                              }
                              .bind(this)
                      }
                  ).then(function(response) {
                      $vm.uploadPercentage = 0;
                      $vm.uploadedFiles.push(response.data);
                  })
                  .catch(function() {
                      const Toast = Swal.mixin({
                          toast: true,
                          position: 'top-end',
                          showConfirmButton: false,
                          timer: 3000
                      });
                      Toast.fire({
                          type: 'warning',
                          title: '&lt;%=i18n.__('
                          upload_has_been_canceled ')%&gt;'
                      })
                  });
          },
      }
  </code></pre>
  
  <p>The problem is that when I click the button for the first time and process the file it works, but when the process is finished, when I click the button for the second time it does not work, the <strong>file</strong> property stays empty on chrome, while on firefox it works.</p>
  
  <p>Here's a gif image showing the issue :
  <a href="https://i.stack.imgur.com/enbPv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enbPv.gif" alt="@change bug"></a></p>