[Vue warn]: onUnmounted ... after upgrading to 4.2.0 - cached model fails to reload

[wcheek]

Describe the bug

After updating to @4.2.0 I have begun seeing this error on mount and it points to my router.ts from main.ts

[Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

I'm caching my GLTF model in a pinia store and this technique works fine in 4.0.2. [email protected].
When I leave my experience page, I get the same error again and my cached model does not load.

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction-7zvlfu?file=src%2Fstore.ts,src%2FApp.vue,src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

1. Load a model using useGLTF and store it in a pinia store as a shallowRef.
2. onMount of the component that uses the model the vue warn appears.
3. Navigate away from the page (by clicking the top buttons in repro)- the error appears a second time.
4. Navigate back - the model is gone.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: ^4.0.0-next.1 => 4.0.0-next.1 
    @tresjs/core: ^4.2.0 => 4.2.1 
    vite: ^5.3.2 => 5.3.2

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.

[wcheek]

Although the [vue warn] only started showing after upgrading tresjs, it seems to be a red herring as far as the reason for the cached model failing to reload....

I suspect that the problem has to do with automatic dispose of models for the sake of memory management that was introduced from ^4.0.0. When the scene is unmounted, I notice that the children prop of my model is being depopulated, resulting in the model disappearing on subsequent remounts.

To get around this issue, I use a composable with global state to load the scenes I want cached and then when the composable is called, I copy the existing cached model into a shallowRef which can then be used in <primitive> to render the scene again. This helps with performance by not needing to await useGLTF on every mount.

import { useGLTF} from "@tresjs/cientos";
import * as THREE from "three";

const { scene, materials } = await useGLTF(
  "./my_gltf.gltf",
  {
    draco: true,
  },
);

function use3dModel ()  {
  const model = shallowRef<THREE.Scene>(scene.clone());

  return {
    model,
  };
};

export default use3dModel;