How is it "beautiful" in the component method to replace the inscription on any element?

Question

Vue.js

There is a field:

....
 <div class="custom-file">
      <input type="file" class="custom-file-input" id="avatar" name="avatar" @change="showUploadedAvatar">
      <label class="custom-file-label" for="avatar">Выберите файл</label>
</div>
....

Method in vue component:

showUploadedAvatar(event) {
      var ext = $(event.target).val().match(/\.(.+)$/)[1];
      if (ext == 'jpg' ||ext == 'jpeg'||ext == 'png') {
        this.newAvatar = URL.createObjectURL(event.target.files[0]);
      } else {
        alert('Некорректный тип файла');
      }
    }

When uploading a file, if it fits in a this.newAvatarlink is added, the variable itself is located in:

data: function(){
    return {
      user: null,
      percents: [5,10,25,50,75,100],
      categories: [],
      newAvatar: null,
    }
  }

and is used to show the uploaded avatar.
Now to the question. I want that when uploading a file, I also showed its name instead of the text "Select a file". What is the best way to do this?
Create another element in data()? Sculpt jquery? Perhaps there are some best practices?

Answer 1

What is the best way to do this?

There is no "correct" way.

Create another element in data()?

Yes .