Vuejs will not refresh data from api call

Hello,
When we first load a page, the page calls an api and loads the content. When we visit another page and come back, the api will not make another request to refresh the content. This even happens on a simple page with date and time. What am I doing wrong or how can I force this to refresh.

<template>
  <ion-page>
    <ion-content fullscreen> Home Page Content {{ currentTime }}</ion-content>
  </ion-page>
</template>

<script setup>
import { ref } from 'vue'
import { IonContent, IonPage } from '@ionic/vue'

let currentTime = ref(new Date())

console.log('home page: ', new Date())
</script>

Thank You
mike

Are you calling the API when the component is mounted? If so, you need to use Ionic’s lifecycle methods instead. This is because Ionic keeps components around in the DOM to speed up page transitions meaning they don’t always get unmounted and re-mounted every time.

Thank you,
I am using Suspense and the api request is in the LocationsList component. onIonViewDidEnter does not work on the LocationsList component. To get this to trigger, I had to create a unique.value = new Date() in the onIonViewDidEnter so it would change. Then I made that bind to a :key in the template. This triggered the request. Is there a better way.

<template>
  <ion-page>
    <master-layout pageTitle="Store Locations">
      <ion-content fullscreen>
        <ion-card v-if="error" class="error-card">
          <ion-card-content class="ion-text-center">
            <h2>An error has occurred. {{ error }}</h2>
          </ion-card-content>
        </ion-card>
        <Suspense v-else>
          <template #default>
            <LocationsList :key="unique" />
          </template>
          <template #fallback>
            <div class="ion-text-center">
              <ion-spinner name="circles"></ion-spinner>
              Loading....
            </div>
          </template>
        </Suspense>
      </ion-content>
    </master-layout>
  </ion-page>
</template>

<script setup>
/*
imports
*/
import { ref, onErrorCaptured } from 'vue'
import { IonContent, IonPage, onIonViewDidEnter } from '@ionic/vue'
import LocationsList from '@/components/Locations/LocationsList.vue'
import { IonCard, IonCardContent, IonSpinner } from '@ionic/vue'

/*
error handling
*/
const error = ref(null)
onErrorCaptured(e => {
  error.value = e
  return true
})

let unique = ref(null)

onIonViewDidEnter(() => {
  console.log('onIonViewDidEnter - locations')
  unique.value = new Date()
})
</script>

Right, the Ionic lifecycle hooks only work on the top level page, not child components.

I would probably either use a global state or pass the locations down to LocationsList through a prop.