Content retrieved from fetch displayed only after opening the tab again

Below is the code on my second tab page. The data is fetched without any problem, but it won’t be displayed until I click on another tab first, then I click again on the second tab. What’s happening here?

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
          <ion-title size="large">List</ion-title>
      <ion-list v-for="item in listItems">
          <ion-label class="ion-text-wrap">
            {{ item.title }}


<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';

var listItems: [
    title: "ni title",
    content: "ni content"

const getData = async () => {
  const res = await fetch("");
  const finalRes = await res.json();
  listItems = finalRes;
  console.log("listItems: " + listItems);

Your listItems isn’t reactive so that is probably why it isn’t updating.

I think you want something like:

const listItems = reactive([])