Tracking Down Orphaned Vue Components

As the question suggested, I was pretty sure these memory issues were caused by orphaned Vue components that were not being cleaned. It is possible to look through the source for circular references etc... and fix manually.

I was looking for a way to find the specific Vue components so I could narrow my search in the code.

Using Heap Snapshot

The best method I have found does require some manual effort but works pretty well.

From the Chrome dev tools Heap snapshot we can search for detached

N.B. You must compile Vue for dev, not production, or this will not work

This will show a list of elements that have been detached from the DOM.

We can now click on one of these items to highlight it.

Then we can head over to the Chrome dev tools console and type $0 to get the element.

From this I can see that the email input from my login page is the culprit and so I should investigate why this is not being destroyed.

Conclusion

While this does provide a good way to track down components that are not being destroyed, please note that not all detached nodes are bad, apply the context of your app to decide whether it is a memory leak or not.