v-for does not reiterated in a template when I update the array in a setup script

Question

I have a v-for in a template that is not triggered when I update my array here is my code,

I tried several options but impossible that it sees the change.

I tried with an interval to see if it updates but I have no result Can you help me? Thanks in advance

<script setup lang="ts">
var notificationData = [
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
];
setInterval(function () {
  console.log("setInterval");
  console.log(notificationData);
  notificationData.push({
    icon: "bi bi-credit-card text-theme",
    title: "PAYMENT METHOD ENABLED",
    time: "10 MINUTES AGO",
  });
}, 10000);
</script>

<template>
   <div class="dropdown-menu dropdown-menu-end mt-1 w-300px fs-11px pt-1">
          <h6 class="dropdown-header fs-10px mb-1">NOTIFICATIONS</h6>
          <div class="dropdown-divider mt-1"></div>
          <template v-if="notificationData && notificationData.length > 0">
            <a
              href="#"
              class="d-flex align-items-center py-10px dropdown-item text-wrap"
              v-for="(notification, index) in notificationData"
              v-bind:key="index"
            >
              <div class="fs-20px">
                <i
                  v-if="notification.icon"
                  v-bind:class="notification.icon"
                ></i>
              </div>
              <div class="flex-1 flex-wrap ps-3">
                <div class="mb-1 text-white">{{ notification.title }}</div>
                <div class="small">{{ notification.time }}</div>
              </div>
            </a>
          </template>
          <template v-else>
            <div class="dropdown-notification-item">No record found</div>
          </template>
          <hr class="bg-white-transparent-5 mb-0 mt-2" />
        </div>
</template>

Answer 1

make the array reactive using ref()