Using Nuxt or Vuetify to scroll to the bottom of a scrollable div upon a watched variable change?

I've been messing around with this for a while, and can't find a way to get this scrollable container to move to the bottom whenever there's a new message. Most suggestions are to set scrollTop to the child element's scrollHeight but the property doesn't seem to be changeable just by setting it with =.

Code snippet:

<template>
  <ul ref="messages">
    <li v-for="msg in ROUND_MESSAGES" :key="msg.text">
      {{ msg.text }}
    </li>
  </ul>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('sessionStorage', ['ROUND_MESSAGES']),
  },

  watch: {
    ROUND_MESSAGES() {
      console.log(this.$refs.messages.scrollTop); // returns 0
      this.$refs.messages.scrollTop += 50
      console.log(this.$refs.messages.scrollTop); // returns 0
    }
  },
}  
</script>

Parent holding this components

<v-row class="content-panel messages-container text-left">
  <v-col class="my-0 py-0 pl-0">
    <MessagesWindow />
  </v-col>
</v-row>

Style:

.messages-container {
    overflow: auto;
    flex-grow: 1;
    width: 642px;
    height: 80px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}