please help me out in this. I am trying to save profile picture but the input.addeventlistener doesn't files on change. I am using vue with rails

This is the mount hook in when in a vue component where I want to trigger the eventlistener.

    mounted() {
    debugger
    this.previewUrl = this.placeholder;
    
    const input = this.$refs.inputSlot.querySelector('input[type="file"]')
    if (input) {
      input.addEventListener('change', event => {
        if(input.files[0]){
        const fakeFilePath  = event.currentTarget.value
        if (input.files[0].size > this.sizeLimit) {
          alert(this.$t('error.file_size', { max_size: this.maxSize }));
          input.value = '';
        } else {
          this.fileName = input.files[0].name

          if (this.preview == 'image') {
            const reader = new FileReader();
            reader.onload = event => {
              this.selectedFile = this.oldImage = this.previewUrl;
              this.previewUrl =  event.target.result;
              this.choosenFile = fakeFilePath;
            };
            reader.readAsDataURL(input.files[0]);
          }
        }
      }
      })
    }
  }

This is the input field

<input accept="image/jpeg,image/png,.jpeg" type="file" name="user[profile_picture]" id="user_profile_picture">