TypeError: Cannot read properties of undefined (reading 'date')

前提・実現したいこと

更新ボタンを押した時に入力を修正した場所が更新されるようにしたい。

VueとGASを使って家計簿アプリの作成をしています。
GASはまだ実装しておりません。

エラーコード

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'date')"

TypeError: Cannot read properties of undefined (reading 'date')

該当のソースコード

html
1<v-btn
2          color="blue darken-1"
3          text
4          :disabled="!valid"
5          :loading="loading"
6          @click="onClickAction"
7        >{{ actionText }}</v-btn>

※{{ actionText }}には追加か更新の文字が入ります。

vue
1<script>
2import { mapActions, mapGetters } from "vuex";
3export default {
4  name: "ItemDialog",
5
6  data() {
7    return {
8      /** ダイアログの表示状態 */
9      show: false,
10      /** 入力したデータが有効かどうか */
11      valid: false,
12      /** 日付選択メニューの表示状態 */
13      menu: false,
14      /** ローディング状態 */
15      loading: false,
16
17      /** 操作タイプ 'add' or 'edit' */
18      actionType: "add",
19      /** id */
20      id: "",
21      /** 日付 */
22      date: "",
23      /** タイトル */
24      title: "",
25      /** 収支 'income' or 'outgo' */
26      inout: "",
27      /** カテゴリ */
28      category: "",
29      /** タグ */
30      tags: [],
31      /** 金額 */
32      amount: 0,
33      /** メモ */
34      memo: "",
35      /** 選択カテゴリ一覧 */
36      categoryItems: [],
37      /** 編集前の年月（編集時に使う） */
38      beforeYM: "",
39
40      /** バリデーションルール */
41      titleRules: [
42        v => v.trim().length > 0 || "タイトルは必須です",
43        v => v.length <= 20 || "20文字以内で入力してください"
44      ],
45      tagRule: v => v.length <= 5 || "タグは5種類以内で選択してください",
46      amountRules: [
47        v => v >= 0 || "金額は0以上で入力してください",
48        v => Number.isInteger(v) || "整数で入力してください"
49      ],
50      memoRule: v => v.length <= 50 || "メモは50文字以内で入力してください"
51    };
52  },
53
54  computed: {
55    /** ダイアログのタイトル */
56    titleText() {
57      return this.actionType === "add" ? "データ追加" : "データ編集";
58    },
59    /** ダイアログのアクション */
60    actionText() {
61      return this.actionType === "add" ? "追加" : "更新";
62    },
63    ...mapGetters([
64      /** 収支カテゴリ */
65      "incomeItems",
66      "outgoItems",
67      /** タグ */
68      "tagItems"
69    ]),
70    ...mapActions([
71      /** データ追加 */
72      "addAbData",
73      /** データ更新 */
74      "updateAbData"
75    ])
76  },
77
78  methods: {
79    /** 追加／更新がクリックされたとき */
80    onClickAction() {
81      const item = {
82        date: this.date,
83        title: this.title,
84        category: this.category,
85        tags: this.tags.join(","),
86        memo: this.memo,
87        income: null,
88        outgo: null
89      };
90      item[this.inout] = this.amount || 0;
91
92      if (this.actionType === "add") {
93        item.id = Math.random()
94          .toString(36)
95          .slice(-8); // ランダムな8文字のIDを生成
96        this.addAbData({ item });
97      } else {
98        item.id = this.id;
99        this.updateAbData({ beforeYM: this.beforeYM, item: item });
100        console.log(item);
101      }
102      this.show = false;
103    },
104  }
105};
106</script>

vue
1import Vue from "vue";
2import Vuex from "vuex";
3
4Vue.use(Vuex);
5
6/**
7 * State
8 * Vuexの状態
9 */
10const state = {
11  /** 設定 */
12  settings: {
13    appName: "GAS 家計簿",
14    apiUrl: "",
15    authToken: "",
16    strIncomeItems: "給料, ボーナス, 繰越",
17    strOutgoItems:
18      "食費, 趣味, 交通費, 買い物, 交際費, 生活費, 住宅, 通信, 車, 税金",
19    strTagItems: "固定費, カード",
20  },
21  /** 家計簿データ */
22  abData: {},
23};
24
25
26const mutations = {
27  /** 指定年月のデータを更新します */
28  updateAbData(state, { yearMonth, item }) {
29    const list = state.abData[yearMonth];
30    if (list) {
31      const index = list.findIndex((v) => v.id === item.id);
32      list.splice(index, 1, item);
33    }
34  },
35};
36
37
38const actions = {
39  /** データを更新します */
40  updateAbData({ commit }, { beforeYM, item }) {
41    const yearMonth = item.date.slice(0, 7);
42    if (yearMonth === beforeYM) {
43      commit("updateAbData", { yearMonth, item });
44      return;
45    }
46    const id = item.id;
47    commit("deleteAbData", { yearMonth: beforeYM, id });
48    commit("addAbData", { item });
49  },
50};

updateAbDataをdispachする時に渡したい値をオブジェクトにしているので、値をStoreに渡すことはできているのでundefinedと出てしまいます。

// this.updateAbData({ beforeYM: this.beforeYM, item: item });

をコメントアウトして更新ボタンを押してconsole.logでupdateAbDataの中にあるitemの中を見るとしっかりと値は取れてきています。
↓

{date: '2022-02-02', title: '収入サンプル', category: '給料', tags: 'タグ1,タグ2', memo: 'メモ', …}
category: "給料"
date: "2022-02-02"
id: "7c8fa764"
income: 2000
memo: "メモ"
outgo: null
tags: "タグ1,タグ2"
title: "収入サンプル"
[[Prototype]]: Object

解決方法が分からない為、ご教示いただけると助かります。