What I want to solve

I’m building a service with Nuxt and Rails, but when I try to display events in the Vuetify calendar, I get an error. There seems to be a problem with the display format, but I’ve taken care of those issues. Specifically, I’m saving them in Rails as YYYY-MM-DD hh:mm. Why doesn’t it work? In the worst case scenario, I’m thinking of rebuilding the Rails table and changing it from datetime related to a string column.

Error

Error: undefined is not a valid timestamp. It must be a Date, number of seconds since Epoch, or a string in the format of YYYY-MM-DD or YYYY-MM-DD hh:mm. Zero-padding is optional and seconds are ignored.

Code

・
・
・
  mounted () {
    this.$axios.$get(url.SCHEDULE_API)
      .then((response) => {
        this.$store.commit('schedule/responseEvent', [{
          id: response.id,
          start: response.start,
          end: response.end,
          color: response.color
        }])
        console.log(response) 
      })
  },
・
・
・

console.log(response)

0:
color: "#2196F3"
created_at: "2022-02-18T21:00:11.936+09:00"
end: "2022-02-18T22:00:00.000+09:00"
id: 2
start: "2022-02-18T22:00:00.000+09:00"
updated_at: "2022-02-18T21:00:11.936+09:00"
[[Prototype]]: Object

store

export const state = () => ({
  events: [],
  selectedEvent: {}
})

export const mutations = {
  responseEvent (state, response) {
    state.events = response
  }
}

Rails

schema

  create_table "schedules", force: :cascade do |t|
    t.datetime "start"
    t.datetime "end"
    t.string "color"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

Data stored in Rails

 #<ActiveRecord::Relation [#<Schedule id: 2, start: "2022-02-18 13:00:00", end: "2022-02-18 13:00:00", color: "#2196F3", created_at: "2022-02-18 12:00:11", updated_at: "2022-02-18 12:00:11"

What I tried.

・I decided to change the format on the Nuxt side and save it.

① Using new Date
No error, but the value is not correct

  mounted () {
    this.$axios.$get(url.SCHEDULE_API)
      .then((response) => {
        this.$store.commit('schedule/responseEvent', [{
          id: response.id,
          start: new Date(response.start),
          end: new Date(response.end),
          color: response.color
        }])
        console.log(response)
      })
  },

conosle

　“`
color: undefined
end: Invalid Date
id: undefined
start: Invalid Date