Vue.js でチャットの発言が追加されるたび、最下段までスクロールをしたい

お世話になっております。

実現したいことは下記の通りなのですが、おわかりになる方いらっしゃいましたら、よろしくお願いいたいます。
1.チャットで発言をする
2.チャットメッセージのあるdivタグが長くなる
3.一番下までスクロールしてほしい

※問題点:一つ前の発言の最下段までしかスクロールしない

    <div v-bind:style="{ height: chat_body_height }" ref="chat_body">
      <div v-for="(chat_data, key) in chat_data_list" :key="key">
        <div>{{ chat_data.nick_name }}</div>
        <div>{{ chat_data.content }}</div>
      </div>
    </div>

    add_chat_message: function (chat_message) {
      this.chat_data_list.push({
        user_id: chat_message.user_id,
        nick_name: chat_message.nick_name,
        content: chat_message.content,
      });

      const element = this.$refs.chat_body;
      var bottom = element.scrollHeight - element.clientHeight;
      element.scrollTo(0, bottom);
      //element.scrollTo(0, 10000);
      console.log(this.$refs.chat_area_body.scrollHeight);

※element.scrollTo(0, 10000);を使用しても一つ前の発言の最下段までしかスクロールしません
※console.log(this.$refs.chat_area_body.scrollHeight)で出力されるのも一つ前の初現時点での高さです

行動規範の内容に同意します

回答1件

nextTickで画面の反映を待てばどうでしょうか？pushしても画面への反映その直後には行われません。

js
1  Vue.nextTick(() => {
2      const element = this.$refs.chat_body;
3      var bottom = element.scrollHeight - element.clientHeight;
4      element.scrollTo(0, bottom);
5  });