Vuetify VDatePicker 菜单错误

问：

我有一个项目 （vue2 + vuetify2） 带有一个组件 v 日期选择器，其属性为 active picker = “YEAR” 和从 2000 年到 2100 年的年份列表，问题是有时组件在选定的年份打开，有时向上滚动并且已经显示最后几年（2100、2099、2098...），打开此组件显示当前年份时，我该如何解决？

<v-menu
      v-model="menu"
      :close-on-content-click="false"
      offset-y
      transition="scale-transition"
      min-width="290"
    >
      <template v-slot:activator="{ on, attrs }">
        <div v-if="$slots.activator" v-bind="attrs" v-on="on">
          <slot name="activator"></slot>
        </div>
        <v-card v-else flat width="100%">
          <v-text-field
            :disabled="disabled"
            :outlined="outlined"
            :dense="dense"
            :filled="filled"
            :rules="[...rules]"
            v-bind="attrs"
            v-on="on"
            :value="getFormattedTime(date)"
            :hide-details="hideDetails"
            :label="label"
            placeholder="placeholder"
            :error-messages="errorMessages"
            prepend-inner-icon="mdi-calendar"
            clearable
            @click:clear="clearDate()"
            readonly
          >
            <template v-slot:append>
              <v-icon class="pr-2">
                mdi-menu-down
              </v-icon>
            </template>
          </v-text-field>
        </v-card>
      </template>
      <v-card width="290">
        <v-card-text class="pa-0">
          <v-date-picker
            v-model="date"
            color="primary"
            no-title
            :disabled="disabled"
            :min="min"
            @click:date="changeData"
            :max="max"
            :active-picker.sync="activePicker"
            first-day-of-week="1"
            :readonly="readonly"
            :value="defaultValue"
          ></v-date-picker>
        </v-card-text>
      </v-card>
    </v-menu>

props: {
    value: {
      required: false,
      type: String
    },
    label: {
      required: false,
      default: "",
      type: String
    },
    min: {
      required: false,
      default: new Date("1970-01-01").toISOString(),
      type: String
    },
    max: {
      required: false,
      default: new Date("2100-01-01").toISOString(),
      type: String
    },
    hideDetails: {
      required: false,
      default: false,
      type: Boolean
    },
    disabled: {
      required: false,
      default: false,
      type: Boolean
    },
    outlined: {
      required: false,
      default: false,
      type: Boolean
    },
    dense: {
      required: false,
      default: false,
      type: Boolean
    },
    filled: {
      required: false,
      default: false,
      type: Boolean
    },
    errorMessages: {
      required: false,
      default: null,
      type: [String, Number, Array, Boolean]
    },
    rules: {
      required: false,
      default: () => [],
      type: Array
    },
    yearSelect: {
      required: false,
      default: true,
      type: Boolean
    },
    readonly: {
      required: false,
      default: false,
      type: Boolean
    }
  },

  data: () => ({
    activePicker: null,
    date: "",
    menu: false,
    defaultValue: null
  }),

  watch: {
    value: {
      immediate: true,
      handler() {
        if (this.value) {
          this.date = this.value;
        } else {
          this.date = "";
          this.defaultValue = new Date();
        }
      }
    },
    menu(val) {
      val && this.$nextTick(() => (this.activePicker = 'YEAR'))
    }
  },

  methods: {
    changeData() {
      this.$emit("input", this.date);
      this.menu = false;
    },
    close() {
      this.date = "";
      this.changeData();
      this.menu = false;
    },
    toggle() {
      this.menu = !this.menu;
    },
    clearDate() {
      this.date = "";
      this.changeData();
    },
    getFormattedTime(date) {
      const newDate = new Date(date);

      if (newDate) {
        return newDate;
      }
    }
  }

转载链接：codepen

我尝试添加一个值为 new Date（） 的值属性，但问题仍然存在