Vue JS keep tab component alive

All,

I need some help making keepAlive in VueJS3 composition api work.

I have a page to configure profiles ( business feature ) where I have some tabs created dynamicly based on user selection from a drop down.

Here is my profile model :

So Each tab is an entry to the realm attribute array.

The VTAB component I am using is from vuero library : https://vuero.cssninja.io/

That I am using this way :

While making modifications, the user should be able to switch tabs without losing the modification he made while switching tabs.

From official documentation, keepalive is the directive to be used for such use case. Unfortunatly I am not able to make it work. I lose all the modifications when I switch the tab.

Do you have any suggestions, to make this work .

Thanks A lot.

It seems to be a limitation from vuero component.
I went with a cutsom solution. By listening on the onBeforeUnmont