[Vue.js] input type="file"で画像のuploaderを作る

やりたいこと

画像をアップロードしたら、それが表示されるものを作りたい。（以下のようなもの）

component

<template>
  <div>
    <img v-show="uploadedImage" :src="uploadedImage" />
    <div class="c-btn--file">
      ファイルを選択
      <input type="file" @change="onFileChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseFileUpload',
  data() {
    return {
      uploadedImage: '',
    }
  },
  methods: {
    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files
      this.createImage(files[0])
    },
    // アップロードした画像を表示
    createImage(file) {
      let reader = new FileReader()
      reader.onload = e => {
        this.uploadedImage = e.target.result
      }
      reader.readAsDataURL(file)
    },
  },
}
</script>