[Vuejs]-Fail to get array data in v-for loop

I see you didn’t return your "shows" variable in the setup format. So Vue does not recognize the variable while rendering the template. This is what you should do:

setup(props) {
  const activeIndex = ref(0);
  const shows = ref([
    {
      date: "15",
      month: "JUN",
      showName: "Piano Duo Recital by Lucas & Arthur Jussen",
      showDesc: "Hong Kong Museum of Art",
    },
    // show 2,3,4 ...
  ]);
  return { shows, activeIndex};
}

Alternatively, you can also define the setup within the script and you won’t have to explicitly return your variables and functions. Like this:

<script setup>

const activeIndex = ref(0);
const shows = ref([
  {
    date: "15",
    month: "JUN",
    showName: "Piano Duo Recital by Lucas & Arthur Jussen",
    showDesc: "Hong Kong Museum of Art",
  }
  // show 2,3,4 ...
]);

</script>

Hope this helps!

Final Ans (sloved):

Delete the export props & setup(props) and use

Template:

<template >
// Loop today show(s) 
 <div class="roll-box">
   <div
     class="show-column"
     v-for="(show, index) in shows"
     :key="index"
   >
   <div class="circle-bg">
     <div class="date">{{ show.date }}</div>
     <div class="month">{{ show.month }}</div>
   </div>

   <div class="show show-box">
     <div class="show-name">
       {{ show.showName }}
     </div>
   <div class="show-desc">{{ show.showDesc }}</div>
   </div>
  </div>
 </div>
</template>

Script:

<script setup>
import VanillaCalendar from "@uvarov.frontend/vanilla-calendar";
import "@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/light.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css";
import { onMounted, ref, reactive } from "vue";

// Calendar
onMounted(() => {
  const vanillaCalendar = new VanillaCalendar("#vanilla-calendar", {
    // Self define for css overwirte
    CSSClasses: {
      // Next/Previous mth btn
      arrow: "vanilla-calendar-arrow",

      // Days colums
      weekDay: "vanilla-calendar-week__day",
      weekDayWeekend: "vanilla-calendar-week__day_weekend",

      // Days color
      dayBtn: "vanilla-calendar-day__btn",
      dayBtnWeekend: "vanilla-calendar-day__btn_weekend",
      dayBtnHoliday: "vanilla-calendar-day__btn_holiday",

      // Last & Next month days
      dayBtnPrev: "vanilla-calendar-day__btn_prev",
      dayBtnNext: "vanilla-calendar-day__btn_next",

      // Today & Selected Day
      dayBtnToday: "vanilla-calendar-day__btn_today",
      dayBtnSelected: "vanilla-calendar-day__btn_selected",
    },
  });
  vanillaCalendar.init();
});

// Day Clickable
const options = {
  actions: {
    clickDay(event, dates) {
      console.log(dates);
    },
  },
};
const calendar = new VanillaCalendar("#calendar", options);
calendar.init();

/* Show's data */
const activeIndex = ref(0);
const shows = reactive([
  // Show 1
  {
    date: "15",
    month: "JUN",
    showName: "Piano Duo Recital by Lucas & Arthur Jussen",
    showDesc: "Hong Kong Museum of Art",
  },
  // Show 2
  {
    date: "15-18",
    month: "JUN",
    showName:
      "Chinese Opera Festival 2023: Opening Programme - Peking Opera Theatre of Beijing",
    showDesc: "Hong Kong Museum of Art",
  },
  // Show 3
  {
    date: "15-30",
    month: "JUN JUL",
    showName: "Chinese Culture and Dance Festival 'Hong Kong Dance Expo 2023'",
    showDesc: "Hong Kong Museum of Art",
  },
  // Show 4
  {
    date: "15",
    month: "JUN",
    showName: "4",
    showDesc: "Test",
  },
  // Show 5
  {
    date: "15",
    month: "JUN",
    showName: "5",
    showDesc: "Test",
  },
]);
</script>

ref can only been used for basic data type. For object or array. You must use reactive instead.

const shows = reactive([]);