Here’s my calendar row with day items in it:

The problem is…

…when I select another day, let’s say 13th of Monday, and after that try to add new tasks they still push to the task array of the first day.

Let me just show you:

On the Image above I switch to Monday, and the task list is empty as it should be by default, looks pretty good to me….but…

After I try to add new tasks, it didn’t add any to the selected day, but just pushed them into the first one (I added two more, there were 3 on the first screen)

Let me show you the code:

This is my main component in which all other’s are used in:
Main.vue

setup() {
    // Create days:
    const currDay = ref({});
    const dayArr = ref([]);

    // Just a library for working with dates:
    const moment = require("moment");
    const daysRemainingThisMonth = moment()
      .endOf("month")
      .diff(moment(), "days");
    /*=============================================
        =            Firebase            =
    =============================================*/
    const { user } = useAuthState();
    const auth = getAuth();

    const router = useRouter();
    const signOutUser = async () => {
      try {
        await signOut(auth);
        router.push("/auth");
      } catch (e) {
        alert(e.message);
      }
    };
    /*=====  End of Firebase  ======*/
    const store = useStore();

// Generate the day data:
    const fillDayArray = () => {
      dayArr.value = Array(daysRemainingThisMonth)
        .fill("")
        .map((item, index) => {
          return {
            currDay: moment().add(index, "day").format("D"),
            dayOfWeek: moment().add(index, "day").format("dddd"),
            tasks: [ ],
            id: Math.floor(Math.random() * new Date()),
          };
        });
      currDay.value = dayArr.value[0];
    };

    const updateCurrDay = (value) => {
      currDay.value = value;
    };

    onMounted(() => {
      fillDayArray();
    });

Template of Main.vue:

<template>
  <div id="main">
    <!-- ! Top Level: -->
    <div class="auth"></div>

    <div class="greeting-block">
      <button @click="signOutUser">Sign Out</button>
      <h1 id="greet-user">{{ user?.email }}</h1>
    </div>

    <div class="header-container">
      <Header />
      <Menu />
    </div>

    <div class="calendar-display">
      <Calendar 
          :dayArr="dayArr"
          @updateCurrDay="updateCurrDay"
      /> 
    </div>

    <div class="task-list">
      <TaskView 
          v-if="dayArr.length"
          :dayArr="dayArr"
          :currDay="currDay" 
      />
    </div>
  </div>
</template>

Component where the tasks are rendered: TaskView.vue

 props: {
    dayArr: {
      type: Array,
      default: () => [],
    },
    currDay: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const store = useStore();

    const dayArrData = ref(props.dayArr);
    const currDay = ref(props.currDay);

    const getClickedTask = (item) => {
      store.state.clickedTask = item;

      store.state.cardStatus
        ? (store.state.cardStatus = false)
        : (store.state.cardStatus = true);
    };
    // ! Delete Item:
    const deleteItem = (idx) => {
      currDay.value.tasks.splice(idx, 1);
    };

   // ====== How do I tell it to push items to the currDay? ======
    const addItem = () => {
      currDay.value.tasks.push({
        name: "Empty Task" + Math.random().toString().substring(0, 4),
        description: "No description...",
      });
 
    };


    console.log(currDay.value);
    onMounted(() => {});
    

    return {
      getClickedTask,
      deleteItem,
      addItem,
      dayArrData,
    };
  },

Template of TaskView.vue:

<template>
  <div>Active card: {{ currDay }}</div>
  <hr />
  <div>Current Task is: {{ currDay.dayOfWeek }}</div>
  <div class="task-wrapper">
    <p id="task-counter">Tasks Today: {{ currDay.tasks.length }}</p>
    <div class="task-counter-wrapper">
      <!-- ? Render if there are no tasks available: -->
      <div class="empty-msg" v-if="currDay.tasks.length == 0">
        <p>Start by adding a New Task!</p>
      </div>

      <div class="task-list" v-for="(task, idx) in currDay.tasks" :key="idx">
        <div class="list-item">
          <div class="container">
            <input class="list-checkbox" type="checkbox" />
              {{ task.name }}
          </div>

          <div class="item-actions">
            <button class="edit-item btn" @click="getClickedTask(task)">
              <img class="icon" src="./Images/editing.png" />
            </button>

            <button class="delete-item btn" @click="deleteItem(idx)">
              <img class="icon" src="./Images/delete.png" />
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="item-card">
      <ItemCard />
    </div>

    <div class="add-task-wrapper">
      <button id="add-task-btn" @click="addItem()">+ Add a new task</button>
    </div>
  </div>
</template>