Estoy tratando de mezclar ThreeJS y Vue2 para hacer algo genial

Pero estoy experimentando un problema, primero configuraré el contexto.

Tengo todas mis instancias de ThreeJS en el estado montado (), cuando está cargado, está claro y no hay problema, pero cuando decido cambiar a otra página y vuelvo varias veces, se recarga cada vez que las instancias de ThreeJS, haciendo grande fugas de memoria y, finalmente, el bloqueo de la aplicación.

Encontré una forma de limpiar todo el desorden limpiando el renderizado en el estado destruido () Vue, pero aquí estoy:

Todos mis datos se almacenan montados, y tratar de cambiar la variable de representación a los datos no funciona en absoluto, por lo que simplemente no puedo llamar a mis variables de representación al estado destruido (), lo que hace que sea imposible borrar la escena.

¿Alguien tiene idea de cómo solucionar este problema? Muchas gracias ^.^

Aquí hay un código para configurar un poco más el contexto

 data: function(){ return{ renderer: "", } }, mounted(){ [...] function init() { container = document.querySelector( '#background' ); this.renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#background") }); // Here is the problem ^ [...] }, destroyed(){ console.log('dispose renderer!') this.renderer.dispose() // Can't call this.renderer as it's null or not defined because of the crash in mounted [...] }