<script setup>
import { onBeforeUnmount, ref } from "vue";
let p5Instance = null;
const sketch = (p5) => {
  p5Instance = p5;

  p5.preload = () => {};

  p5.setup = () => {};

  p5.draw = () => {};

  p5.mousePressed = () => {};

  p5.mouseDragged = () => {};

  p5.mouseReleased = () => {};

  p5.mouseWheel = (event) => {};
  p5.keyPressed = (event) => {
    switch (event.keyCode) {
      default:
        break;
    }
  };
};

// p5 instance Cleanup on unmount component
onBeforeUnmount(() => {
  if (p5Instance) {
    p5Instance.remove();
  }
});
</script>

<template>
  <P5 style="overflow: hidden; height: 100dvh"/>
</template>

If anyone comes across this post with the same problem i had, this is the solution I found, save the p5 instance in a global variable and use the on unmount hook to remove the instance on navigation.

Sadly i dont remember where i found or who gave me this solution, otherwise i would give them some credit.

@emeik has a very similar solution