Vue3 Component "OnMounted" Refresh

Question

I have a Vue3 Dynamic Component wrapped in <keep-alive> that essentially adds 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>

on one of the pages, there is an onMounted function that activates a search when the page is active, however, the user can also navigate back and forth to other pages; after they initially hit the "Search Page", and then try to navigate back, onMounted doesn't initiate the search a second time, which is what is needed.

I figured that having a key within <component> would do the trick for re-rendering, but it didn't seem to, so how should I go about getting the "Search Page" to re-render when navigated?

(For reference, the <Dialog> navigation occurs by an emit that just increments the <component :is> object key).

Thanks!

Answer 1

onMounted will not trigger when visit the same page on the second time. you can activates with onActivated.

solution1 - move the page out of keep-alive

solution2 - using onActivated