Vuesax: vsPopup component not destroyed on route change

[kopitar]

If reporting a bug, please make sure to provide the following:

• Windows 10
• Node.js version 8.16.2
• Vuesax version 3.11.1
• Browser version : Chrome 81.0.4044.138 (Official Build) (64-bit)
• npm

On route change the component does not get removed from DOM. So when browsing the page each route change inserts new elements into the DOM, does not remove them on route change and just keeps adding and adding (and increasing memory usage).

I have a fix that handles that, but that means I have to do this in every view that uses vsPopup component. This should be handled by the component itself.

        beforeDestroy() {
         let components = this.$children;

         for(let i=0; i < components.length; i++) {
             if (components[i].$el.classList && components[i].$el.classList.contains('cex-popup')) {
                 components[i].$el.remove();
             }
         }
        },

[CharsiBabu]

I'm using following piece of code

router.afterEach(() => {
  document.querySelectorAll('body > div.vs-component').forEach(el => {
    el.remove()
  })
  document.querySelectorAll('body > div.vs-content-sidebar').forEach(el => {
    el.remove()
  })
})

The popups don't have parent props and are inserted as direct descendant of body.
So when route/view changes they're still attached to body and remain in view.
Also, as route/view has already changed you can't close them either.

[reineltchris]

The vs-popup dissapears now but it throws an error in the console:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$el' of undefined"