JSの配列でindexOfとspliceを使用して指定の値を削除しようとすると一番後ろの値が削除されてしまう。

Question

前提

Nuxt.jsとRailsでサービスを作成しています。
配列の中の値を削除する必要があったのでindexOfとspliceメソッドを使用して指定の値を削除しようと思いましたが、指定の値ではなく配列の最後の値が削除されてしまいます。

実現したいこと

・配列の中で指定の値を削除したい

該当のソースコード

配列の値

// 　同じような値が0〜3に
(4) [{…}, {…}, {…}, {…}, __ob__: Observer]
0: {…}
1: {…}
2: {…}
3: {…}

color: "#2196F3"
end: 1648920600000
id: 275
long_time: false
name: null
post_id: null
start: 1648914300000
timed: true
updated_at: "2022-04-09T20:56:19.593+09:00"

store

export const state = () => ({
  // 対象配列を管理
  events: [],
})

export const mutations = {
  // イベントを指定削除
  deleteEvent(state, payload) {
    state.events.splice(state.events.indexOf(payload), 1)
  },
}

export const actions = {
  // イベント削除、サーバー側に削除リクエストを送ってevents配列の値も削除
  deleteEvent ({ rootState, commit }, event) {
    this.$axios.$delete(`${url.SCHEDULE_API}/${event.id}`)
    .then(() => {
// eventにthis.selectedEventが入っている
      commit('deleteEvent', event)
 ・
 ・
 ・
  }

components

//selectedEvent
color: (...)
created_at: (...)
end: (...)
id: (...)
long_term_id: (...)
long_time: (...)
name: (...)
post_id: (...)
start: (...)
timed: (...)
updated_at: (...)

//　サーバーに送って削除してもらうデータとフロント側で削除するデータを送る
    deleteEvent (event) {
      this.$store.dispatch('schedule/deleteEvent', this.selectedEvent)

Answer 1

「indexOfが-1を返した」、つまり、「見つからなかった」と言うことでしょう。
spliceするのは見つかった場合だけにしましょう。