ActionCableでundefinedエラー

前提

APIにRails、フロントにVueを使ってチャット機能を作っています。
ActionCableを使用しているのですが、フロント側でエラーが発生しています。

発生している問題・エラーメッセージ

チャットページにアクセスするとブラウザのコンソールに下記のエラーが表示されます。

Uncaught TypeError: Cannot read properties of undefined (reading 'received')
    at Subscriptions.notify (action_cable.js?90ce:493:1)
    at Connection.message (action_cable.js?90ce:347:1)

該当のソースコード

チャットページのVueコンポーネントが下記のようになっています。

javascript
1<template>
2  <div class="flex flex-col mt-4 relative">
3    <div
4      v-for="message in messages"
5      :key="message.id"
6      class="px-2"
7      :class="{
8        received: message.user_id !== $store.getters.currentUserId,
9        sent: message.user_id === $store.getters.currentUserId,
10      }"
11    >
12      <span class="content">{{ message.content }}</span>
13      <span class="created-at">{{ message.created_at | dateTime }}</span>
14    </div>
15    <div class="w-full px-2 absolute bottom-0 left-0">
16      <textarea
17        name="message"
18        id="message"
19        placeholder="メッセージを入力してください"
20        v-model="enteredMessage"
21        @keypress.enter.prevent="postMessage"
22        class="w-full bg-gray-100 mb-1.5 p-2.5 box-border border-0 rounded-lg resize-none"
23      ></textarea>
24    </div>
25  </div>
26</template>
27
28<script>
29import axios from "axios";
30import ActionCable from "actioncable";
31import DateConverter from "@/mixins/dateConverter.js";
32
33export default {
34  mixins: [DateConverter],
35  data() {
36    return {
37      messages: "",
38      enteredMessage: "",
39      chatRoomChannel: "",
40    };
41  },
42  methods: {
43    resizeMessageArea() {
44      const messageArea = document.getElementById("message");
45      function setMessageAreaHeight() {
46        messageArea.style.height = "auto";
47        messageArea.style.height = `${messageArea.scrollHeight}px`;
48      }
49      messageArea.addEventListener("input", () => {
50        if (messageArea.scrollHeight < 220) {
51          setMessageAreaHeight();
52        }
53      });
54    },
55    getMessages() {
56      axios
57        .get(
58          process.env.VUE_APP_API_BASEURL +
59            "/chat_rooms/" +
60            this.$route.params["chatRoomId"]
61        )
62        .then((response) => {
63          this.messages = response.data.messages;
64        });
65    },
66    createConnection() {
67      const consumer = ActionCable.createConsumer(
68        "ws://" + process.env.VUE_APP_API_HOST + "/cable"
69      );
70      this.chatRoomChannel = consumer.subscriptions.create("ChatRoomChannel", {
71        connected() {
72          this.getMessages();
73        },
74        received() {
75          this.getMessages();
76        },
77        speak() {
78          return this.perform("speak", {
79            message: {
80              content: this.enteredMessage,
81              user_id: this.$store.getters.currentUserId,
82              chat_room_id: this.$route.params["chatRoomId"],
83            },
84          });
85        },
86      });
87    },
88    postMessage() {
89      this.chatRoomChannel.speak(this.enteredMessage);
90      this.enteredMessage = "";
91    },
92  },
93  mounted() {
94    this.resizeMessageArea();
95    this.getMessages();
96    this.createConnection();
97  },
98  beforeUnmount() {
99    this.chatRoomChannel.unsubscribe();
100  },
101};