Dynamic creation of date picker

[keyofevergreen]

Hello. There was an issue with the dynamic rendering of the date picker wrapped in a v-menu

What I want to do:
Possibility to download the report on the selected periods. Initially period one. In case more periods are needed, I click the button to draw another date picker

Problem:
The first date picker works correctly, everything is rendered
But starting from the second date pickers stop working correctly. They do not have a range selected, the data is not stored in data

I came to the conclusion that it has to do with refs. But all my attempts to rewrite the solution ended in failure.

Maybe someone has already experienced something similar? How can this be resolved?

<template>
  <v-menu
    ref="menu"
    v-for="(period, index) in periods"
    :key="period"
    v-model="menu[period]"
    :return-value.sync="formData[period]"
  >
    <template #activator="{ on, attrs }">
      <v-text-field
        v-model="formattedPeriods[period]"
        v-bind="attrs"
        v-on="on"
      />
    </template>
    <v-date-picker
      v-model="formData[period]"
      no-title
      scrollable
      range
    >
      <v-spacer />
      <v-btn @click="menu[period] = false">
        Cancel
      </v-btn>
      <v-btn @click="savePeriod(index, period)">
        Save
      </v-btn>
    </v-date-picker>
  </v-menu>
</template>

<script>
export default {
  data: () => ({
    ...,
    menu: {
      period1: false, // State for display the date picker
    },
    formattedPeriods: {
      period1: "", // Value for v-text-field
    },
    periods: ["period1"], // Array for v-for
    formData: {
      period1: [], // Data for send on backend
    },
  }),
  methods: {
    ...,
    savePeriod(index, period) {
      const dateRange = this.formData[period];
      this.$refs.menu[index].save(dateRange);
      this.formattedPeriods[period] = this.getDateRange(dateRange);
    },
    addPeriod() {
      const countPeriods = this.periods.length;
      const newPeriodName = `period${countPeriods + 1}`;
      this.formData[newPeriodName] = [];
      this.menu[newPeriodName] = false;
      this.formattedPeriods[newPeriodName] = "";
      this.periods.push(newPeriodName);
    },
  },
};
</script>