Memory leak when creating tables dynamically (destroy() does not clean up properly)

[argasta]

Describe the bug
When creating tables dynamically and destroying them with destroy() not all references are cleaned up properly which leads to memory leaks. The following objects still hold references to the grid and prevent the garbage collector to clean it up properly: recyclerComponents, observerInfoMap, instanceMap. Additionally there are also event listeners on el (mousedown, dblclick, click, mouseout, mouseover, touchstart, touchmove, touchend, contextmenu) and the document (mousedown, keydown) that are not removed and prevent the garbage collection.

To Reproduce
In the zip file toast-ui-leak.zip is a working example written with vue3:

1. npm install
2. npm run dev
3. in the app click the reload button multiple times (e.g. 10-20 times)
4. See the heap snapshot which shows that the grid gets not garbage collected properly

Expected behavior
When calling grid.destroy() there should be a proper clean up and the grid should be garbage collected

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser chrome, edge, firefox
• Version 4.21.22