Property "" was accessed during render but is not defined on instance.

[Matthew2306]

Warn: [Vue warn]: Property "shows" was accessed during render but is not defined on instance.

I have a similar situation, could anyone tell how can I fix the v-for loop?

Design:

Template:

<div class="show-column">
  <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>

Script:

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",
  },
  {
    date: "15-18",
    month: "JUN",
    showName:
      "Chinese Opera Festival 2023: Opening Programme - Peking Opera Theatre of Beijing",
    showDesc: "Hong Kong Museum of Art",
  },
  {
    date: "15-30",
    month: "JUN JUL",
    showName: "Chinese Culture and Dance Festival 'Hong Kong Dance Expo 2023'",
    showDesc: "Hong Kong Museum of Art",
  },
  {
    date: "30",
    month: "JUN",
    showName: "4",
    showDesc: "Test",
  },
]);

Originally posted by @Matthew2306 in #3780 (comment)

[Justineo]

Please follow the issue template, otherwise we'll close the issue directly. Thank you.

[Justineo]

See https://new-issue.vuejs.org/