Неопределенная ошибка при переборе массива объектов

Я работаю над отображаемым списком дат для страницы расписания мероприятий, и у меня возникли проблемы с отображением списка extraRounds. Это в основном работает точно так же, как и верхний начальный экземпляр, но мне нужен цикл, чтобы пройти через массив объектов, которые потенциально могут быть добавлены.

У меня есть условное состояние, чтобы показать extraRounds, если они есть, чтобы дать каждому элементу заголовок с индексом показанного события, но когда дело доходит до подачи информации о каждом объекте в мои вычисляемые свойства Я получаю эту ошибку: Expected Object, got Date

Я думал, что атрибут Date сам по себе является объектом, но, похоже, это не так.

Как я могу правильно отображать интерполированные даты без этой ошибки? Где я ошибаюсь с этим циклом?

index.dateVotingOpenConverted и extraRound.dateVotingOpenConverted оба не работают.

Любые указатели/помощь будут очень признательны!

Ваше здоровье!

CodeSandbox: https://codesandbox.io/s/event-schedule-gukrb

Расписание событий

<template>
  <div class="event-schedule-info">
    <div class="_pill _color">Round 1</div>
    <div class="_row">
      <div class="_pill _clear">Applications</div>
      <div class="_date">
        {{ dateSubmissionOpenConverted }}〜{{ dateSubmissionCloseConverted }}
      </div>
    </div>
    <div class="_row">
      <div class="_pill _clear">Voting</div>
      <div class="_date">
        {{ dateVotingOpenConverted }}〜{{ dateVotingCloseConverted }}
      </div>
    </div>
    <div class="_row">
      <div class="_pill _clear">Results</div>
      <div class="_date">{{ dateResultAnnouncementConverted }}</div>
    </div>
    <br />
    <div v-if="extraRounds">
      <div
        v-for="(extraRound, index) in extraRounds"
        :key="'extraRound' + index"
        class="event-schedule-info"
      >
        <div class="_pill _color">Round {{ index + 2 }}</div>
        <div class="_row">
          <div class="_pill _clear">Applications</div>
          <div class="_date">
            {{ index.dateVotingOpenConverted }}〜{{
              index.dateVotingCloseConverted
            }}
          </div>
        </div>
        <div class="_row">
          <div class="_pill _clear">Results</div>
          <div class="_date">{{ index.dateResultAnnouncementConverted }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.event-schedule-info > *
  margin-bottom: 10px

._pill
  height: 21px
  width: 83px
  left: 207px
  top: 814px
  font-size: 14px
  font-style: normal
  font-weight: 400
  line-height: 21px
  letter-spacing: 0em
  text-align: center
  border-radius: 20px

._color
  color: white
  background-color: indianred

._clear
  color: indianred
  background-color: white
  border: solid 1px indianred

._row
  display: flex
  justify-content: flex-start
  align-items: center

._date
  font-family: Hiragino Maru Gothic Pro
  font-size: 18px
  font-style: normal
  font-weight: 400
  line-height: 27px
  letter-spacing: 0em
  text-align: left
  padding: 0 5px

._vote
  padding-right: 5px
  text-decoration: underline
  font-family: Hiragino Maru Gothic Pro
  font-style: normal
  font-weight: normal
  font-size: 13px
  line-height: 19px
  color: indianred
</style>

<script>
export default {
  name: "EventScheduleInfo",
  props: {
    /**
     * @type {Date}
     */
    dateSubmissionOpen: { type: Object },
    /**
     * @type {Date}
     */
    dateSubmissionClose: { type: Object },
    /**
     * @type {Date}
     */
    dateVotingOpen: { type: Object },
    /**
     * @type {Date}
     */
    dateVotingClose: { type: Object },
    /**
     * @type {Date}
     */
    dateResultAnnouncement: { type: Object },
    /**
     * @type {[{ dateVotingOpen: {Date}, dateVotingClose: {Date}, dateResultAnnouncement: {Date} }]}
     */
    extraRounds: { type: Array },
  },
  data() {
    return {};
  },
  methods: {
    monthDayConverted(d) {
      return d.toLocaleString("ja", { month: "long", day: "numeric" });
    },
    monthDayTimeConverted(d) {
      return d.toLocaleString("ja", {
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
      });
    },
  },
  computed: {
    dateSubmissionOpenConverted() {
      return this.monthDayConverted(this.dateSubmissionOpen);
    },
    dateSubmissionCloseConverted() {
      return this.monthDayConverted(this.dateSubmissionClose);
    },
    dateVotingOpenConverted() {
      return this.monthDayConverted(this.dateVotingOpen);
    },
    dateVotingCloseConverted() {
      return this.monthDayConverted(this.dateVotingClose);
    },
    dateResultAnnouncementConverted() {
      return this.monthDayTimeConverted(this.dateResultAnnouncement);
    },
  },
};
</script>

Привет, мир

<template>
  <div class="hello">
    <EventSchedule
      :dateSubmissionOpen="new Date('2020/06/01')"
      :dateSubmissionClose="new Date('2020/06/30')"
      :dateVotingOpen="new Date('2020/06/30')"
      :dateVotingClose="new Date('2020/07/10')"
      :dateResultAnnouncement="new Date('2020/07/14 12:00:00')"
      :extraRounds="[
        {
          dateVotingOpen: new Date('2020/07/16'),
          dateVotingClose: new Date('2020/07/26'),
          dateResultAnnouncement: new Date('2020/07/31 12:00:00'),
        },
        {
          dateVotingOpen: new Date('2020/08/20'),
          dateVotingClose: new Date('2020/08/26'),
          dateResultAnnouncement: new Date('2020/08/31 12:00:00'),
        },
        {
          dateVotingOpen: new Date('2020/09/16'),
          dateVotingClose: new Date('2020/09/26'),
          dateResultAnnouncement: new Date('2020/09/31 12:00:00'),
        },
      ]"
    />
  </div>
</template>

<script>
import EventSchedule from "./EventSchedule";
export default {
  name: "HelloWorld",
  components: { EventSchedule },
  props: {},
};
</script>