First Iteration of Fields
Second Iteration of Fields
Following Iterations with the same behavior

Every time I add an iteration of fields, the select field (el-select:ElementPlus) its previous selected item becomes blank.

Code:

<el-form-item>
                    <template v-for="(day, index) in gateForm.availableDays" :key="index">
                        <div style="display: flex; gap: 5px; margin-bottom: 0.5rem">
                            <el-select v-model="gateForm.availableDays[index].day" placeholder="Day" value-key="dayId">
                                <el-option
                                    v-for="availableDay in filterAvailableDays"
                                    :key="availableDay.dayId"
                                    :label="availableDay.dayName"
                                    :value="availableDay"
                                />
                            </el-select>
                            <el-time-select
                                v-model="gateForm.availableDays[index].timeStart"
                                isRange
                                placeholder="Start Time"
                            />
                            <el-time-select
                                v-model="gateForm.availableDays[index].timeEnd"
                                isRange
                                placeholder="End Time"
                            />
                            <el-button type="primary" @click="addAvailableDays" :disabled="disablePlusButton"><i class="fa-solid fa-plus"></i></el-button>
                            <el-button type="danger"><i class="fa-solid fa-minus"></i></el-button>
                        </div>
                    </template>
                </el-form-item>

data() {
  return{
gateForm: {
        gateId: "",
        name: "",
        status: "",
        remarks: "",
        siteId: "",
        availableDays: [
          {
            day: {
                dayId: null,
                dayName: ""
            },
            timeStart: "",
            timeEnd: "",
          },
        ],
      },
      availableDays: [
        { dayId: 1, dayName: "Monday" },
        { dayId: 2, dayName: "Tuesday" },
        { dayId: 3, dayName: "Wednesday" },
        { dayId: 4, dayName: "Thursday" },
        { dayId: 5, dayName: "Friday" },
        { dayId: 6, dayName: "Saturday" },
        { dayId: 0, dayName: "Sunday" },
      ],
 }
},
computed: {
    filterAvailableDays() {
        return this.availableDays.filter((day) => {
            return!this.gateForm.availableDays.some((availableDay) => {
                return availableDay.day.dayId === day.dayId;
            });
        });
    },
    isRowComplete() {
        return this.gateForm.availableDays.every((day) => {
            return day.day && day.timeStart && day.timeEnd;
        });
    },
    disablePlusButton() {
        return this.gateForm.availableDays.length === this.availableDays.length || !this.isRowComplete;
    
    },
  },
  methods: {
    async addGate() {
      this.gateDialogFormVisible = true;
    },
    addAvailableDays() {
      console.log("gateForm", this.gateForm);
      this.gateForm.availableDays.push({
        day: {
                dayId: null,
                dayName: ""
            },
        timeStart: "",
        timeEnd: "",
      });
    },
  },

I am expecting it to be the same as the time select wherein it still shows the previous time selected even though I added iterations of the fields.