title: VUE Deallocating memory using THREE JS between routes
body: <p>I'm in the process of learning VUE JS. I have a very basic SPA that routes between various pages.</p>
  
  <p>I have a number of THREE JS demos that I've built in my spare time and I've noticed that if I jump between pages on them eventually they grind to a halt from a build up of memory. I want to avoid pasting their scripts in here as they're massive and I don't think the problem lies within them.</p>
  
  <p>I think the problem the lies somewhere in between how I'm instantiating them and my lack of knowledge in VUE JS is what's causing me trouble with this problem.</p>
  
  <p>Here is an example of one of the views I'm routing to in VUE JS:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="particles"&gt;
          &lt;main-menu&gt;&lt;/main-menu&gt;
  
          &lt;div id="demo"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import mainMenu from 'root/views/menu.vue';
  
      export default {
          components: { mainMenu },
          mounted() {
              var Particles = require('root/webgl/particles.js');
              var demo = new Particles();
              demo.run();
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The original demos were built using traditional JavaScript (it's a ES5/6 class) and I was hoping that I could just plug them into my VUE SPA. Within each demo I am doing things like:</p>
  
  <pre><code>this.vsParticles = document.getElementById('vs-particles').textContent;
  </code></pre>
  
  <p>to load the shaders and to attach my THREE demo to a DOM element.</p>
  
  <p>The issue I'm having is that somewhere something isn't being deleted. Within my demos i'm not creating anything new in the DOM and they run fine in non-SPA demos, but once I place them into a SPA app and jump between pages they build up.</p>
  
  <p>I'm under the impression that when you change routes everything should get wiped. So all of the elements within my template tags and any objects I create within mounted(). But this doesn't seem to be the case and I'm just wondering is there something extra I need to include in VUE to completely clean everything up inbetween pages?</p>