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

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 >
          <h6 >NOTIFICATIONS</h6>
          <div ></div>
          <template v-if="notificationData && notificationData.length > 0">
            <a
              href="#"
              
              v-for="(notification, index) in notificationData"
              v-bind:key="index"
            >
              <div >
                <i
                  v-if="notification.icon"
                  v-bind:
                ></i>
              </div>
              <div >
                <div >{{ notification.title }}</div>
                <div >{{ notification.time }}</div>
              </div>
            </a>
          </template>
          <template v-else>
            <div >No record found</div>
          </template>
          <hr  />
        </div>
</template>

CodePudding user response：

make the array reactive using ref()

CodePudding user response：

I packed my array with vuejs reactive function and it works properly now thanks to Sherif Hassan

var notificationData = reactive([
  {
    icon: "bi bi-bag text-theme",
    title: "NEW ORDER RECEIVED ($1,299)",
    time: "JUST NOW",
  },
]);

CodePudding user response：

notificationData needs into Vue

var app = new Vue ({
      date(){
          return{ 
            notificationData
          };
      }
    });