title: Undetectable memory leak in vuejs application
body: <p>I've been trying to resolve this problem for a while now, I even gave it a shot to rewrite the entire program but without success. The application is running on VueJS 2.3.3 and is supposed to be running on Chromium in combination with a Raspberry Pi (irrelevant information, for now).</p>
  <p>We're working with several components which are being included in a single file, later on this file will be compiled using either <code>gulp</code> or <code>npm run dev</code>. When the instance of <code>VueJS</code> initializes, a request will be send using <code>Vue Resource</code>'s <code>$http</code> option. This'll receive a json response with a size of around <code>30mb</code>. This'll be saved in the data array, as seen here:</p>
  <pre><code>this.$http.get('&lt;url&gt;' + this.token)
      .then((response) =&gt; {
          this.properties = response.properties;
      });
  </code></pre>
  <p>This data will later on be used for further actions, another thing that is worth mentioning is that the data is being refreshed every once in a while. Which is where I think the problem occurs, if I'm not refreshing the data every 5 minutes (can be longer too, really depends on the way I'm testing) the program runs fine. It's just that I want to refresh the data every once in a while to retrieve new information. The way of setting a timeout which I'm using is as following:</p>
  <pre><code>this.dataTimeout = setTimeout(this.refreshData, 300000); 
  </code></pre>
  <p>Each (so called) <code>property</code> has at least 6 base64 images saved in it's JSON, which are later used to present to the user. Besides that, there is a name, address, and some other tiny bits of data. It doesn't sound all that wrong but I'm getting the feeling that each response makes the memory grow so intense that even a desktop is getting trouble running it.</p>
  <p>Each 10 seconds a new <code>property</code> will be presented on the user's screen including the images, street, location, etc. I'm not sure if there is a memory leak in my code or if I'm forgetting something. A few questions pop up in my head:</p>
  <ol>
  <li>Do I need to reset the response I'm getting from the server back to
  <code>null</code> or <code>undefined</code>?</li>
  <li>Could there be a leak in one of the plugins I'm using (Just VueResources)?</li>
  <li>For how long can a <code>VueJS</code> instance stay alive, is there any recommended time to reload the entire program?</li>
  <li>What thinks should I take in consideration in order to achieve this at all?</li>
  </ol>
  <p>I've taken out the data renewal and put a demo project online, this can be seen right <a href="http://mtvslide.sqitsup.nl/65688e0b-7986-44d7-b810-c0333c9b9747" rel="nofollow noreferrer">here</a>. The main problem I'm having is that the browser just runs out of memory and shows us the amazing <code>Aw snap!</code> page from Chrome. I tried taking snapshots from the memory usage but it all seems fine, it just explodes randomly after a while.</p>