I'm trying to mix ThreeJS and Vue2 in order to make something cool

But I'm experiencing a problem, I'll first set up the context.

I have all my ThreeJS instances in the mounted() state, when it's loaded, it's clear and there's no problem, but when I decide to switch to another page, and come back multiple times, it reloads every time the ThreeJS instances, making big memory leaks and eventually, crashing the app.

I founded a way to clean all the mess by cleaning the rendering at the destroyed() Vue state, but here I am :

All my data are stored in mounted, and trying to switch the render variable into the data doesn't work at all, so I just can't call my rendering variables into the destroyed() state, making it impossible to clear the scene.

Is anyone have a clue about how to solve this problem? Thanks a lot ^.^

Here's some code to set up a bit more the context

  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
                [...]

}