У меня есть компонент чата vue при отправки сообщения я хочу чтобы мой messages__container прокручивался до самого низа, но прокручивается не до самого конца, вот код
<template>
  <div id="chat">
    <h1>govno</h1>
    <div class="messages__container" ref="messagesContainer">  <!-- Добавлен ref -->
      <div v-for="msg in messages" :key="msg.id" class="message">
        {{ msg.text }}
      </div>
      <div ref="scrollAnchor" class="scroll-anchor"></div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Введите сообщение..." />
  </div>
</template>

<script>
export default {
  name: 'ChatComponent',
  data() {
    return {
      messages: [],
      newMessage: '',
      ws: null,
    };
  },
  created() {
    this.connectWebSocket();
  },
  beforeUnmount() {
    if (this.ws) {
      this.ws.close();
    }
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://localhost:5173');

      // Добавляем обработчик открытия соединения
      this.ws.onopen = () => {
        console.log('WebSocket connection established');
      };
      
      this.ws.onmessage = async (event) => {
        const blob = event.data;
        
        try {
          const text = await blob.text();

          const msg = JSON.parse(text);

          this.messages.push({ id: this.messages.length, text: msg.text });
        } catch (error) {
          console.error('Error processing message:', error);
        }
      };

      // Также хорошо бы добавить обработчик ошибок
      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error);
      };

      this.ws.onclose = () => {
        console.log('WebSocket connection closed. Reconnecting...');
        setTimeout(() => this.connectWebSocket(), 1000); // Переподключение через 1 секунду
      };
    },
    sendMessage() {
      if (this.newMessage.trim() === '') return;

      // Проверяем состояние соединения перед отправкой
      if (this.ws.readyState !== WebSocket.OPEN) {
        console.error('WebSocket is not open. Current state:', this.ws.readyState);
        // Можно попробовать переподключиться или показать сообщение пользователю
        this.connectWebSocket();
        return;
      }

      const message = { text: this.newMessage };
      this.ws.send(JSON.stringify(message));
      this.newMessage = '';
      this.$nextTick(() => {
        this.scrollBottom();
        //console.log('omg');
      });
      this.scrollBottom();
    },
    scrollBottom() {
      //const messagesContainer = this.$refs.messagesContainer;
      //messagesContainer.scrollTop = messagesContainer.scrollHeight;
      const anch = this.$refs.scrollAnchor;
      if (anch) {
        anch.scrollIntoView({behavior: 'smooth'});
      }
    },
  },
};
</script>

<style scoped>
#chat {
  display: flex;
  flex-direction: column;
  height: 250px;
  width: 300px;
  border: lightgreen solid 2px;
  padding: 10px 10px 0px 10px;
}
.messages__container {
  flex: 1;
  max-height: 100px;
  overflow-y: auto;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.message {
  margin: 5px 0;
  padding: 5px;
  color: white;
  border: lightgreen solid 2px;
  font-family: monospace;
}
.scroll-anchor {
  height: 1px;
  width: 100%;
  visibility: hidden;
}
</style>