Laravel+vue.js+javascriptで画像圧縮サービスを作成中ですが自己解決ができないため、助けてほしいです

【概要】
Laravel/vue.js/javascritpにて画像の圧縮プログラムを開発しています。
しかし、自己解決不能で詰まってしまいましたので、解決する方法とコード修正を頂きたく考えています。


【募集背景】
画像の圧縮、リサイズをドラッグドロップでできるWEBシステムを開発しています。
画像１枚での圧縮、リサイズはできるようになったのですが、複数の画像を使用するとうまく動作しません。
処理はサーバーを通さずにvue.jsとjavascriptで処理を完結させています。

・私の推測
うまくいかない原因ですが、
addEventListener('load',()=>{}
で同期をとっているのですが、複数の画像を使用するとこちらの処理だと上書きされてしまうからだと考えています。
参考となった記事
https://gray-code.com/javascript/execute-processing-when-image-load-completed/
https://maku77.github.io/js/image/onload.html

・new image()を配列に入れる？
・同期処理を行う？
などなど色々な記事を読んで色々と試したのですが、私の力では実装できませんでしたので、コードを修正、アドバイス頂ける方を募集しています。



【コミュニケーション方法】
チャットのみ

【参考URL】
https://github.com/tako0812/labotaki
当該WEBアプリケーションをgithubに上げました。
いくつか作成したアプリがあるのですが、その中の
/image-comp2
というURLのものです。
試行錯誤してますので、コードが荒れてます・・・。
よりよくなるようなコードディングも併せてご教授頂けると嬉しいです。