vue中实现滚动条一直保持在底部

今天项目中需要实现一个聊天模块，需要聊天框一直保持在元素的底部，下面记录下实现的方法：

<template>
   <div id="chat"></div>
</template>
<script>
   export default{
    
    
     mounted(){
    
    
      // 页面首次展示时滚动条定位底部
      this.scrollToBottom()
     },
     updated(){
    
    
      // 在接收到新消息的时候触发方法将滚动条定位到底部
      this.scrollToBottom()
     },
     methods:{
    
    
       // 定义将滚动条定位在底部的方法
       scrollToBottom(){
    
    
        this.$nextTick(()=>{
    
    
         let chat = this.$el.querySelector("#chat")
         chat.scrollTop = chat.scrollHeight
        })
       }
     },
   }
</script>
<style>
#chat{
    
    
  height: 200px;
  overflow-y:auto;
}
</style>