Content retrieved from fetch displayed only after opening the tab again

Ionic Framework Ionic Vue
1

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?

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

    </ion-content>
  </ion-page>
</template>

<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("https://jsonplaceholder.typicode.com/todos/");
  const finalRes = await res.json();
  listItems = finalRes;
  console.log("41?")
  console.log("listItems: " + listItems);
}
getData();
</script>
2

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

I think you want something like:

const listItems = reactive([])