Javascript 自动滚动分区问题

我正在尝试制作一个div滚动，因为内容被添加到其中。我使用的是一个Vuejs列表，它会随着源数组（Vuejs的数据数组）的更改而更新项目

但是，messages容器元素不会滚动。我担心Vuejs可能会从源（数据）异步更新（插入）元素，这样可能会跳过

if（messagescocontainer.scrollTop=maxScrollofMessageContainer）

check（在检查之后添加元素（消息））

---

我能做些什么来防止这种情况发生呢？

在最后一条消息上滚动的方法怎么样

模板：

<message v-for="message in messages" v-class="last-message : $index === (items.length-1)">
</message >

let scroll = false;

messagesContainer.addMessageChild(new messageElement(...)); // addMessageChild appends item to vuejs's data, it may be async when it actually adds the element to the DOM which may cause the problem

if (messagesContainer.scrollTop = maxScrollOfMessagesContainer)
    scroll = true;
messagesContainer.scrollTop = maxScrollOfMessagesContainer;

<message v-for="message in messages" v-class="last-message : $index === (items.length-1)">
</message >

// smooth scroll on .last-message
scrollToLastMessage: function () {
  document.querySelector('.last-message').scrollIntoView({ 
    behavior: 'smooth' 
  })
}

// scroll when messages change
watch: {
  messages: function () {
    this.scrollToLastMessage()
  }
}

// scroll when page ready
ready() {
  this.scrollToLastMessage()
}