Memory leak when detaching components from DOM

[loïc poisot]

Hi.
I've been spending a day finding the source of a memory leak I have in my SPA.
I've been able to link it to pouch-vue and adding/removing COMPONENTS from the DOM.
I emphasis components, because when removing simple elements such as DIVs, the issue is not present (I haven't tried with more complicated structure not "componentized")

Here is the Allocation stacks timeline of a simple app with a component in a "v-if". During this record, I've been showing/hiding the component multiple time. You probably know, but blue stacks are things that are still in memory, while grey bars are memory that was allocated BUT is now released

Bellow, the same record by just loading the necessary PouchDB modules and adding them to Vue (doing nothing more):

These records were made with chrome web tools.
We can see a memory leak of 20kB every time I detach the component. Even though there is nothing relating to pouch in the component.
Here it's only 20kB because the component is only containing text, but in my case, with a huge map, I'm leaking 70MB of memory each time, so I would say it is a pretty serious issue.

I created the most simple codesandbox to showcase the issue: https://codesandbox.io/s/vue-pouch-memory-leak-tcqm3
to test without pouch and without the issue, remove lines 3-6 and 12-17 in main.js

Regards, Loïc

[Simon Kunz]

Hey thanks for reporting this, we'll take a look asap

[loïc poisot]

Thanks. I would love to help, but I'm quite new to Vue.
I hope you can find a solution :)