画像ファイル選択した後に動かない

Question

前提・実現したいこと

vueで実装しています。
画像選択ウィンドウの『ファイルを検索する』ボタンからファイルを選択したら、その画像が表示されるように反応してほしい。
ドラッグアンドドロップで画像を入れたときはうまく表示される。

発生している問題・エラーメッセージ

ファイルを選択して、開くを押しても画像が表示されるように切り替わらない。
同じことをもう一度したときは表示される。（はじめの一回だけ切り替わらない）

該当のソースコード

<template>
  <div class="mediaUploader">

    <template v-if="!value.length">
      <input
        :id="name"
        :name="name"
        :accept="accept"
        @input="handleInput"
        type="file"
        class="mediaUploader__input"
        multiple
      />
      <div class="mediaUploader__label">
        <label
          :for="name"
          :class="draggedClasses"
          @dragover.prevent="isDragged = true"
          @dragleave.prevent="isDragged = false"
          @drop.prevent="handleInput"
          class="mediaUploader__body"
        >
          <span class="mediaUploader__btn">ファイルを選択test</span>
        </label>
      </div>
    </template>

   　//ファイル選択したらこっちの表示に切り替え
    <template v-else>
      <ul class="mediaUploader__previews">
        <template v-for="preview in previewItems">
          <li :key="preview.name" class="mediaUploader__preview">
            <button
              @click="handleDelete(preview.name, preview.extension)"
              type="button"
              class="mediaUploader__previewBtn"
            >
              <div class="mediaUploader__img">
                <template v-if="!preview.isNotImage">
                  <AppImg :src="preview.src" alt="" />
                </template>
                <template v-else>
                  <span class="mediaUploader__noImage">{{ preview.extension }}</span>
                </template>
              </div>
              <div class="mediaUploader__previewContent">
                <template v-if="preview.isDuplicate">
                  <AppTexts class="mediaUploader__caution" caution small>
                    <span>同名のファイルが存在します。このままアップロードすると上書きされます。</span>
                  </AppTexts>
                </template>
                <dl class="mediaUploader__metas">
                  <div class="mediaUploader__meta">
                    <dt class="mediaUploader__metaTitle">ファイル名</dt>
                    <dd class="mediaUploader__metaContent">{{ preview.name }}</dd>
                  </div>
                  <template v-if="!preview.isNotImage">
                    <div class="mediaUploader__meta">
                      <dt class="mediaUploader__metaTitle">画像サイズ</dt>
                      <dd class="mediaUploader__metaContent">{{ preview.width }}px / {{ preview.height }}px</dd>
                    </div>
                  </template>
                  <div class="mediaUploader__meta">
                    <dt class="mediaUploader__metaTitle">容量</dt>
                    <dd class="mediaUploader__metaContent">{{ preview.size }}</dd>
                  </div>
                </dl>
                <AppIcon icon="close" size="18px" class="mediaUploader__closeIcon" gray />
              </div>
            </button>
          </li>
        </template>
      </ul>

      <div class="mediaUploader__upload">
        <AppTexts small>
          <span>まだアップロードは完了していません。内容を確認してアップロードボタンを押してください。</span>
        </AppTexts>
        <AppButton @click="$emit('upload')" secondary>アップロード</AppButton>
      </div>
    </template>
    //ここまで
  </div>
</template>

export default Vue.extend({
  components: { AppButton, AppTexts, AppImg, AppIcon },
  props: {
    name: { type: String, required: true },
    value: { type: Array as PropType<File[]>, required: true },
    getDuplicated: { type: Function, required: true },
    accept: { type: String },
  },
  data(): Data {
    return {
      previewItems: [],
    }
  },
  computed: {
    
  },
  methods: {
    async handleInput(e) {
      console.log('1')
      let inputFiles = []
      const files: File[] = []

      this.isDragged = false

      if (e.target.files && e.target.files.length) {
        inputFiles = e.target.files
      } else if (e.dataTransfer && e.dataTransfer.files.length) {
        inputFiles = e.dataTransfer.files
      } else if (e.target.file) {
        inputFiles = [e.target.file]
      } else {
        return
      }

      console.log(inputFiles)
      this.previewItems = []

      for (let i = 0, length = inputFiles.length; i < length; i++) {
        files.push(inputFiles[i])

        if (/^image/.*?$/.test(inputFiles[i].type)) {
          const preview = new FileReader()
          preview.readAsDataURL(inputFiles[i])
          preview.onload = result => {
            this.updatePreviewImage(result, inputFiles[i].name)
          }
        } else {
          this.previewItems.push({
            name: inputFiles[i].name.replace(/^(.*?)..*?$/, '$1'),
            size: this.getFileSize(inputFiles[i].size),
            extension: inputFiles[i].name.replace(/^.*?.(.*?)$/, '$1'),
            isNotImage: true,
            isDuplicate: await this.getDuplicated(inputFiles[i].name)
          })
        }
      }
      this.$emit('input', files)
    },
  }
})