Basically I have this calendar row with date info on each element:

I'm trying to stop that loop of single data so that each calendar item has it's own data about the current and the next days.

The first calendar element should always display the current day, the rest of the items are the remaining days

Template

<template>
<div class="wrapper">
  <div class="calendar-wrapper">
      <div class="calendar-row"
           v-for="(day, idx) in dayArr"
           :key="idx"
        >
          <div
            id="card"
            class="day-card unactive"
            @click="test(idx)"
          > 
              <div class="card-info">
                <p class="name">{{ dayOfWeek }}</p>
                <p class="day">
                    {{ currDay }} 
                </p>
              </div>
             <div class="dot-wrapper">
                <div class="dot-status undone" />
                <div class="dot-status undone" />
             </div>
          </div>

      </div>
  </div>
</div>
</template>

Script

 setup() {
        const moment = require('moment')
        const m = moment

        // Get the remaining month days starting from today:
        const daysRemainingThisMonth = moment().endOf('month').diff(moment(), 'days');

        // Turn the remaining days into an array for future rendering in the Template
        let dayArr = Array(daysRemainingThisMonth)
    
        // Get the index of a clicked calendar item:
        const test = (idx) => {
            console.log(idx + 1);
        }

        // Get the current day:
        const currDay = m().format('D')
        // Get the current week day:
        const dayOfWeek = m().format('dddd')
}

I believe that there is a way to somehow access each calendar element and give it it's own data, but I have no idea how