vue2 滚动条置于底

需求，一个聊天框，每更新一条消息，滚动条置于底。

显示的消息为一个list（chatList）
监听list的变化，
$nextTick后赋值滚动条属性

   <template>
  <div class="chat-container">
    <div ref="messageContent" id="chat-inside" class="chat-inside">
      <div class="chat-item" v-for="item in chatList">
          <div class="item-message">{{item.nick}}:&nbsp;&nbsp;{{item.text}}</div>
          <div class="item-time">{{timeFormat(item.time*1000)}}</div>
    </div>
    </div>
    <div class="item-input">
      <textarea type="text" placeholder="请输入您想发的弹幕" v-model="chatMessage" maxLength="50" ></textarea>
      <div class="item-buttom" >
        <div @click="sendTextMessage">发送</div>
        <img @click="sendTextMessage" src="../../../assets/send.png" />
      </div> 
    </div> 
  </div>
</template>



 watch: {
      chatList(newVal,oldVal){
        this.$nextTick(() => {
          var div = document.getElementById('chat-inside');
          div.scrollTop = div.scrollHeight;
        })
      }
    },
    methods:{
     sendTextMessage() {
        let _that = this
        if(_that.chatMessage == ''){
          _that.$message.error('请不要发送空消息！')
          return;
        }
 		_that.chatList.push(message)
      }
  }