Vue 2.7.14 Functional Component Memory Leak

Project setup

npm install

Run project

npm run serve

How to reproduct memory leak

1. Open base url of project (printed in console)
2. Click on "Go to Test Component"
3. Click on Home
4. Open developer tools and take a heap snapshot
5. Filter for "Objects retained by detached DOM nodes"
6. See there are detached elements, e.g. a paragraph element with id = testParagraph.
7. Manually trigger garbage collection
8. Take another heap snapshot and filter for "Object retained by detached DOM nodes" again
9. See that e.g. the paragrpah is still being retained => paragraph element has leaked (it is detached from the DOM but is not being garbage collected)
10. Go to FunctionalComponent.vue to line 4 and change the parameter for functional to "false"
11. Redo steps 1 - 8
12. See that there are not detached elements (even without manually garbage collecting) => all elements have been properly garbage collected