Tabs element not properly unmounting

[lea0o0oo]

I am undecided about the fact if I should open an issue or not, since maybe there is already a solution that I missed, even after doing research.

So the problem is that the tab element doesen't unmount properly after switching tab, and instead of re-using the same element it spawns another (while the other one is still mounted).

To demonstrate it I made this very quickly:
https://stackblitz.com/edit/vitejs-vite-saxw2u?file=src%2FApp.vue

There is a tab element with Tab 1 and Tab 2, both with a button "Start adding".
When clicking the button, it triggers an interval (with 1 second of delay) that continuously adds a random number to a <pre> element.
If the unmounting is done correctly, when switching tabs the numbers should stop being added, but this is not the case.
And, to demonstrate the fact that it spawns new instances of the element, if you click every time you switch tab, the frequency of the numbers getting added increases.
Nothing changes even using <KeepAlive> component

I hope that I provided a good explanation to this, but please see the stackblitz project to understand it

[romansp]

It definitely unmounts when tabs switch but you're not clearing your setInterval callback. This has to be done manually, or you can use a composable from VueUse which does it for you automatically.

I recommend you revisit lifecycle hooks in vue.js docs: https://vuejs.org/guide/essentials/lifecycle.html

Fixed your stacklitz here: https://stackblitz.com/edit/vitejs-vite-qwhhsa?file=src%2FTab1.vue