How to listen to a route change using Vue3 composition API?

Questions
1

I am having problems to control my app when I don’t know which Route is current displayed.
My views are all loaded from the begin and I don’t know how to trigger a content update when they are displayed to the user.

For example:
Wishlist page is mounted with initial data!
But after user adding new items to wishlist and clicking to open again the wishlist, it still showing outdated list because I couldn’t trigger a new data fetch when the view was re-opened.

app.vue

<template>
  <f7-app v-bind="f7params">

    <f7-views tabs class="safe-areas">
      <f7-toolbar tabbar icons bottom>
        <f7-link tab-link="#view-home" tab-link-active icon-f7="house_fill" icon-md="material:home" text="Home"></f7-link>
        <f7-link tab-link="#view-wishlist" icon-f7="heart" text="Wishlist"></f7-link>
        <f7-link tab-link="#view-discover" icon-f7="search" text="Discover"></f7-link>
        <f7-link tab-link="#view-deals" icon-f7="money_euro_circle" text="Deals"></f7-link>
      </f7-toolbar>

      <f7-view id="view-home" name="home" main tab tab-active url="/"></f7-view>
      <f7-view id="view-wishlist" name="wishlist" tab url="/wishlist/"></f7-view>
      <f7-view id="view-discover" name="discover" tab url="/discover/"></f7-view>
      <f7-view id="view-deals" name="deals" tab url="/deals/"></f7-view>
    </f7-views>

  </f7-app>
</template>

<script>
import ...
export default {
  components: { ... },

  setup() {
    const f7params = {
      name: 'My App',
      theme: 'auto',
      store: store,
      routes: routes,
    };

    return { f7params };
  }
}
</script>

wishlist.vue

<template>
  <f7-page name="wishlist">
    <AppHeader />

    <f7-block>
      <f7-link v-for="item in list" @click="redirectToPdpLink(item.CSIN)">
        <ProductCard :image="item.img" :title="item.title" />
      </f7-link>
    </f7-block>
  </f7-page>
</template>

<script>
import ...

export default defineComponent ({
  name: 'Wishlist',
  components: { ... },

  props: {
    f7route: Object,
    f7router: Object,
  },

  setup(props) {
    const list = ref();
    const getStoredWishlist = async () => {
      list.value = await StorageService.getValue(STORAGE_KEYS.WISHLIST) ?? [];
    };
    getStoredWishlist();

    const redirectToPdpLink = (csin) => {
      props.f7router.navigate('/product/'+csin+'/');
    };

    /*
    HERE I NEED AN EVENT TO CAPTURE routeChange TO CURRENTLY "/wishlist/"
    AND FETCH WISHLIST DATA AGAIN:
    routeChange(() => { getStoredWishlist(); });
    */

    /*
    === NOT WORKING
    props.f7router.routeChange((newRoute, previousRoute, router) => {
      console.log(newRoute, previousRoute);
    });
    */

    return { list, redirectToPdpLink };
  }
});
</script>

Can someone help me with that?

I have read the documentation, tried to use the routeChange, but via compositionAPI I don’t know how to access it.