vuejs hlsjs で動画を再生しようとしています。スクロールのたびに動画が再生されてしまう問題

【概要】 vue.js でhls.jsを使って動画を再生しようとしています。 スクロールして、動画が表示されたタイミングで動画を再生を開始したいです。 今の問題としてはスクロールで動画が再生できるのですが、 スクロールのたびに動画がはじめから再生されてしまいます。 addEventListener scroll で動画を再生させる関数を実行します。 その後、動画を再生したと同時に用意したデータの値をtrueにします。 値がtrueの間は removeEventListenerでscrollしても 動画を再生させないようにしたいです。 codesandboxで参考のコードを乗せているので確認していただきたいです。 よろしくお願います。 急ぎのためすぐに対応できる方を探しています。