Не обновляются данные и не отправляются сообщения в Vue.js приложении c WebSocket

У меня есть Vue.js приложение c WebSocket. Но он работает как то не так. Не обновляются данные. Не отправляются сообщения

<template>
<div class="custom-page">
    <!-- custom-page__bg -->
    <div class="custom-page__bg message-page__bg">
    </div>
    <!-- /custom-page__bg -->
    <!-- container -->
    <div class="container medium">
        <!-- chat-box -->
        <div class="chat-box">
            <!-- chat-box__header -->
            <div class="chat-box__header">
                <a href="#" class="back"><i class="icon icon-left"></i></a>
                <h1 class="main-title">Добро пожаловать в онлаин-чат службы поддержки</h1>
                <div style="width: 12px;" class=""></div>
            </div>
            <!-- /chat-box__header -->
            <!-- chat-box__messages -->
            <div class="chat-box__messages">
                <div class="chat-box__separator">
                    12 июля
                </div>
                <div class="chat-box__message own">
                    <div class="message">
                        Добрый день, Дмитрий. <br>Опишите вашу проблему более подробно. У вас возникли ошибки (баги) на сайте?
                        <div class="time">13:05</div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            {{ recieve_messages }}
            <!-- /chat-box__messages -->
            <!-- chat-box__form -->
            <form class="chat-box__form main-form">
                <textarea class="input-style" rows="7" v-model="message"></textarea>
                <div class="row">
                    <label class="main-form__item file-field">
                    </label>
                    <div class="main-form__submit">
                      <button @click.prevent="sendMessage" type="submit" class="radius-button standart rounded">Отправить</button>
                    </div>
                </div>
            </form>
            <button @click="sendMessage">click</button>
            <!-- /chat-box__form -->
        </div>
        <!-- /chat-box -->
    </div>
    <!-- /container -->
</div>
</template>

<script>
  export default {
    data: () => ({
      ws: null,
      message: '',
      recieve_messages: []
    }),
    computed: {
    },
    methods: {
      connect() {
        this.ws = new WebSocket('ws://skade.cc:38080')
        
        this.ws.onmessage = message => {
          this.recieve_messages = JSON.parse(message.data)
          console.log(this.recieve_messages)
          console.log(message.data)
        }

        this.ws.onopen = () => {
          console.log('Connected...')
        }

        this.ws.onclose = () => {
          console.log('Destroyed')
          this.connect()
        }

      },
      sendMessage() {
        console.log('send')
        const mess = {
          name: 'Andreu',
          message: this.message
        }
        this.ws.send(JSON.stringify(mess))
      },
    },
    created() {
      this.connect()
    },
    destroyed() {
      this.ws.close()
    }
  }
</script>