JavascriptをVue.jsで再現したい

Question

複数画像をアップロードをしたく以下のQiitaが理想のコードですが、どのように
JavascriptをVue.jsで再現したらよいか分からず困っています。
コードの教授お願いします。

元リンク
https://qiita.com/mochizukikotaro/items/ff6cd42e902e79b02649

<script>
  document.getElementById('article_image_file_name').onchange = function(event){
    initializeFiles();

    var files = event.target.files;

    for (var i = 0, f; f = files[i]; i++) {
      var reader = new FileReader;
      reader.readAsDataURL(f);

      reader.onload = (function(theFile) {
        return function (e) {
          var div = document.createElement('div');
          div.className = 'reader_file';
          div.innerHTML = '<div class="reader_title">' + encodeURIComponent(theFile.name) + '</div>';
          div.innerHTML += '<img class="reader_image" src="' + e.target.result + '" />';
          document.getElementById('list').insertBefore(div, null);
        }
      })(f);
    }
  };

  function initializeFiles() {
    document.getElementById('list').innerHTML = '';
  }
</script>

Comments

[m.ts10806]

＞JavascriptをVue.jsで再現
ちょっと何がしたいための表現なのか分かりません。コードとの関連性も今一つピンときません。

[gentaro]

これだけだとタダの丸投げです。
Vueのリファレンスや入門書、入門記事等を読んで出来るところまでコード書いた上で、具体的な疑問点を質問しましょう。
https://teratail.com/help/avoid-asking