Unmount the Canvas component instant mount children again even if canvas is not mounted

[dghez]

Describe the bug

When you unmount the Canvas component, it instant re-mount it again, triggering onMounted callback.
I thought it was a nuxt issue but is actually unrelated, nuxt was just mount/unmount the page tha was causing the problem.

Canvas is in /about.

Screen.Recording.2024-08-08.at.12.54.15.mov

Reproduction

https://stackblitz.com/edit/nuxt-starter-k7pfzc?file=pages%2Findex.vue

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dghez]

@alvarosabu Completely random hint that might be completely wrong: https://github.com/Tresjs/tres/blob/main/src/components/TresCanvas.vue#L144

Why are we calling mountCustomRenderer in the dispose function that is called in the onUnmounted?

const dispose = (context: TresContext, force = false) => {
  disposeObject3D(context.scene.value as unknown as TresObject)
  if (force) {
    context.renderer.value.dispose()
    context.renderer.value.renderLists.dispose()
    context.renderer.value.forceContextLoss()
  }
  (scene.value as TresScene).__tres = {
    root: context,
  }
  mountCustomRenderer(context)
}