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.

https://github.com/user-attachments/assets/68f8281e-bdf3-48d2-942b-3b52f3fdb595

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

• [X] I agree to follow this project's Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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)
}