Component vue3 can't initialaize array data on created

Question

I have a component that it has v-for to showing multiple repetition of data, I use vue3 with composition API , When I initialize table of data and log it, it shows the right value what I want, but the length it is 0 and it's not rendring on template, I don't know why !!

template:

<template>
  <base-page>
  <form @submit.prevent="submitForm">
    <base-header>
      <template #title>
        <nav class="py-2 rounded-md w-full">
          <ol class="list-reset flex">
            <li>
              <router-link
                to="/dashboard"
                class="text-blue-600 hover:text-blue-700"
                >Accueil</router-link
              >
            </li>
            <li><span class="text-gray-500 mx-2">/</span></li>

            <li class="text-gray-500">
              Ajouter une réservation pour {{ terrain.name }}
            </li>
          </ol>
        </nav>
      </template>
    </base-header>
    <div class="mt-4">
      <div class="flex text-center  grid grid-cols-5">
        {{sessionList}}
        <div v-for="(item, index) in sessionList" :key="index" class="rounded-lg ml-2 shadow-lg bg-white max-w-sm">
          <h5 class="text-gray-900  text-center font-medium m-2">Card title</h5>
          <a href="#!">
            <img class="rounded-t-lg m-auto w-16 h-16" src="/img/green-ball.png" alt=""/>
          </a>
          <div class="p-2">
            
            <p class="text-gray-700 text-base mb-4">
              Some quick example text to {{index}}
            </p>
            <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">
              Réserver
            </button>
          </div>
        </div>
       
      </div>
    </div>
  </form>
  </base-page>
</template>

script:

<script setup>
import {ref,onMounted} from "vue"
import {mdiContentSavePlusOutline} from "@mdi/js"
import moment from "moment"
moment.locale('fr');
const terrain = ref({
  id: 1,
  name: "terrain 1",
  capacity: 11,
  duration: 1,
  price: 8,
  external: true,
  complexe: "Stade 1",
  formatted_created_at: "10/10/2022",
})

let date = new moment()
let datesList = []
let sessionList = []
let nextDate = date

  for (let index = 0; index < 15; index++) {
  datesList.push(nextDate.format('YYYY-MM-DD'))
  let tab  = []
  let hourDate = nextDate
  for (let i = 0; i < 4; i++) {
    let debut = moment(nextDate).add(i+1,'hours').format('HH:mm:ss')
    let fin = moment(nextDate).add(i+2,'hours').format('HH:mm:ss')
    tab.push({
      debut : debut,
      fin : fin,
      reserved : i % 2 == 0
    })
  }
  sessionList[datesList[index]] = tab
  nextDate = date.add(1,'days');
  
}
console.log(datesList)
console.log(sessionList)
</script>

log:

Edit

the sessionList variable it would have like this format:

Answer 1

You define sessionList as an array, but you are adding items to it like an object. So the arrays length is still 0, but you added properties with the dates as you can see in the screenshot. This is also why nothing is rendered. I am not sure what you want to do with the date, but maybe just add it as another property of the tab object and then push this to the array:

tab.push({
    debut : debut,
    fin : fin,
    reserved : i % 2 == 0,
    date: datesList[index]
});
sessionList.push(tab);

EDIT after updated question:
Define sessionList as a Map:
const sessionList = new Map();
Then adding entries:
sessionList.set(datesList[index], tab) ;
In the template you then have to replace the v-for with:
<div v-for="[key, value] in sessionList":key="key"...>