Vue memory leak when rendered components are removed

I had a similar issue. The object that I passed on through a property to the next component was complex and large in my case, I do not know if this is also the case for you?

My issue was solved by changing the way of passing my object. By changing the property to a number, in my case an ID, I was able to retrieve my object in the component where the property is used (based on the ID). As a result, I did not have to pass on the entire object repeatedly. For some reason passing large objects as data props is not working as it should and causes strange behavior...

In your case it maybe helps when you don't pass the 'tab' property directly to your component, but rather an index of the location of this element in the store and then fetching it directly from the store within your component.

So you need to change your v-for to:

<b-tab v-for="(tab, index) in tabs" @click="doSomething" @change="doSomething">    <keep-alive>        <TabComponent :tabIndex="index"></TabComponent>    </keep-alive></b-tab>

And in your TabComponent:

props: {    tabIndex: Number,},data: function () {    return {        tab: this.$store.state.tabs[this.tabIndex]    }}

Of course this principle would also need to be applied to any child components doing the same thing to prevent any memory leaks in child components which would obviously also impact the parents. Hopefully I could help you :)

You are ordering vue to keep your components alive and asking why they are alive?!!!

Solution:Just adding max prop to <keep-alive> sudo-component and passing tabs.length value will force it to discard removed ones.

<keep-alive :max="tabs.length">...</keep-alive>

See keep alive docs