nuxtのrouter.pushでページ遷移すると何かが蓄積されている

Question

Nuxt.jsとthree.jsを使って、index.vueと_slug.vueいう２つのテンプレートからなる単純なサイトを作っています。

トップページではthree.jsでいくつかの3Dモデルを表示させ、Raycasterを発射し特定のモデルに交差すると$router.pushで特定の下層ページに遷移するようにしています。

トップページから下層ページへ、そしてまたトップページへ戻る時も$router.pushで戻っているのですが、出戻りの回数を重ねるとかなり重くなり、さらに交差するはずのないところで光線を発射すると、何か目に見えないものと交差し、意図しない下層ページに飛んでしまいます。

トプページの裏に今までアクセスしたトップページが重なっているように見えます。
さらに移動した先の下層ページでも光線を発射すると、ありえないですがトップページのモデルと交差しているようで他の下層ページに飛んでしまいます。（まず、光線を発射するraycasterのスクリプトは書いていない）

router.pushではなくrouter.replaceで試しましたが、同じ結果でした。

そもそもnuxtの非同期遷移についてちゃんと理解してないのかもしれませんが、
何か解決策がありましたらご教授いただけると幸いです。

Answer 1

多分ですが、beforeDestroyでイベントリスナーたちとthree.jsのレンダーを無効にすれば、解決しそうです。
全ページのmounted()で発動した処理全部丸ごと無効にできたらいいなあと思ったのですが、そんなことはできないから残っていんですよね。。