So I have this v-btn element in my vue project that I use to upload a file.The uploaded file's name is saved in a string pickeruploadedref.I added a div element with v-if=pickeruploadref!='' that displays the name of the uploaded file saved in pickeruploadedref and a button that on click executes the canceluploadref method which simply turns pickeruploadedref back to an empty string.This is my code in template

 <!-- 1. Create the button that will be clicked to select a file -->
        <v-btn 
            color="primary" 
            rounded 
            dark 
            :loading="isSelectingref" 
            @click="handleFileImportref"
        >
            Upload File
        </v-btn>

        <!-- Create a File Input that will be hidden but triggered with JavaScript -->
        <input 
            ref="uploader1" 
            class="d-none" 
            type="file" 
            @change="onFileChangedref"
        >
             <div v-if="pickeruploadref!=''">
              {{this.pickeruploadref}}
                  <v-btn
      class="ma-2"
      outlined
      small
      fab
      color="red"
      @click="canceluploadref()"
    >
      <v-icon>mdi-close</v-icon>
    </v-btn>
            </div>

in script

export default {
  data() {
    return {
      isSelectingref: false,    
      pickerref: "",
      pickeruploadref:"",
    }
  },
methods: {

    canceluploadref(){
       console.log(this.pickeruploadref)

      this.pickeruploadref=''
      console.log(this.pickeruploadref)
    },
     handleFileImportref() {
                this.isSelectingref = true;

                // After obtaining the focus when closing the FilePicker, return the button state to normal
                window.addEventListener('focus', () => {
                    this.isSelectingref = false
                }, { once: true });
                
                // Trigger click on the FileInput
                this.$refs.uploader1.click();
            },
                
            onFileChangedref(e) {
              if (e.target.files[0]!=null)
              {
                let name= e.target.files[0].name;
                 name=name.replace('.json','')
                  this.pickeruploadref=name
                        console.log(this.pickeruploadref)

              
              }

the first time i use the button everything works fine the file name is saved in the pickeruploadedref string and the button to make pickeruploadedref an empty string is shown and when I click on it pickeruploadedref is empty again but when I reuse the upload button,pickeruploadref stays as an empty string and the handlefileimportref is not getting executed for some reason.