Recently, I encountered a situation where I have a Vue3 Dynamic Component enclosed within a <keep-alive> tag. This component facilitates navigation within a PrimeVue <Dialog> and is populated by an object:
const component = [
{
id: 0,
name: 'Test'
props: {
...
}
},
...
]
<keep-alive>
<component :is="component.name" :key="component.id" :props="component.props" />
</keep-alive>
In one of the pages, there is an onMounted function that triggers a search when the page is active. However, users can navigate back and forth between pages. The issue arises when they return to the "Search Page" after the initial search, the onMounted function does not initiate the search again, which is necessary.
I tried using a key within the <component> tag to force a re-render, but it did not work as expected. So, I am seeking advice on how to ensure the "Search Page" re-renders upon navigation.
(Just to provide context, the navigation within the <Dialog> is done through an emit event that increments the object key within <component :is>).
Thank you in advance!