TypeError: t.message.apply is not a function

I am receiving this error and am not sure why I’m receiving it. I have no function named “message”.

Receiving and sending messages works fine for my local environment, but not when I test it live. Is there a something I am missing here? I’m assuming this is the problem (or is that not the case?)

Vue file –

<template>
  <div class="modal-container">
    <v-dialog v-model="dialog" width="450">
      <v-card data-test="direct-messaging-button">
        <header>
          <h4>Communicating with: {{ phoneNumber }}</h4>
        </header>
        <section class="chat-box">
          <div class="chat-box-list-container" ref="chatbox">
            <ul class="chat-box-list">
              <li class="message"
                  v-for="(message, idx) in messages"
                  :key="idx"
                  :class="message.author">
                <p>
                  <span>{{ message.text }}</span>
                </p>
              </li>
            </ul>
          </div>
        </section>
        <footer>
          <form @submit.prevent="message">
            <input
                type="text"
                v-model="message"
                placeholder="Write a message..." />
            <input
                class="submit_btn"
                @click="submitMessage(); apiGroup();"
                type="submit"
                value="Send" />
          </form>
        </footer>
      </v-card>
    </v-dialog>
  </div>
</template>


<script lang="ts">
import Vue from 'vue'
import store from "@/store";
import axios from 'axios'

export default Vue.extend({
  name: "A2PMessagingModal",
  data() {
    return {
      message: '',
      messages: [],
      phoneNumber: ''
    }
  },
  mounted() {},
  methods: {
    apiGroup() {
      setInterval(() => {
        this.receiveMessage();
      }, 5000);
    },
    async submitMessage() {
      this.messages.push({
        text: this.message,
        author: 'sender'
      })
      let formData = new FormData;
      formData.set('message', this.message)
      axios.post(`api/v1/message/a2pMessaging`, formData)
          .then(res => {
            console.log(res.data)
            this.phoneNumber = store.state.location.phoneNumber;
            this.message = '';
          })
          .catch(error => {
            alert(error.response.data.errors);
          })
    },
    async receiveMessage() {
      axios.get(`/api/v1/message/a2pMessageReceiver`)
          .then(res => {
            if("+1"+store.state.location.phoneNumber === res.data.originationNumber) {
              this.messages.push({
                author: 'respondent',
                text: res.data.messageBody
              })
            } else {
              this.messages.push({
                text: null
              })
            }
          })
    },
  },
  computed: {
    dialog() {
      return store.state.location.showA2PMessagingModal
    },
    cancel() {
      store.commit('location/showA2PMessagingModal', false)
    }
  }
})

</script>