Using ref in vue js to customize file upload

HTML

<div class="container">

<div  class="input-file" @click="uploadFile">

Click the image to upload file .... <br />

<img src="https://lh3.googleusercontent.com/proxy/V154fhNoijX-hUcjXrcvXS2bK0zXLwCIHepFvNuZ_Ptk94E0y2--_I8_4JN7c5bZB0UfpcLUK4KPHJ4H18lrgS_Sg6sbNHLgBan7lVHFZAv1nICqYa4nT3mqyY8" style="width:400px;height:200px;">

<p class="text"> The input type file below will be hidden but we have assigned it a reference. So when this div is clicked we will create an event so as to replicate the input file is clicked 

</p> 

</div>
<input type="file" style="display:none;" ref="fileUploader" />

</div>

JavaScript

new Vue({
el:'.container',
  methods: {

    uploadFile() {

      this.$refs.fileUploader.click()

    }

  }

})