Scroll to the bottom of a list using Vue's nextTick()

scrollToBottomList.vue

<script setup>
import { ref, nextTick } from 'vue';

const items = ref([]);
const newItem = ref('');
const itemsList = ref(null);

const addItem = async () => {
  // Add item to list
  items.value.push(newItem.value);
  newItem.value = '';

  // This won't work immediately
  console.log('before DOM Update', itemsList.value.scrollHeight);

  // Wait for DOM update
  await nextTick();

  // Now we can safely access the updated DOM
  const container = itemsList.value;
  container.scrollTop = container.scrollHeight;
  console.log('after DOM Update', itemsList.value.scrollHeight);
};
</script>

<template>
  <div>
    <div ref="itemsList" class="items-container">
      <div v-for="item in items" :key="item">
        {{ item }}
      </div>
    </div>

    <input v-model="newItem" @keyup.enter="addItem" />
    <button @click="addItem">Add Item</button>
  </div>
</template>
<style scoped>
.items-container {
  height: 80px;
  margin-bottom: 5px;
  border: 1px solid black;
  padding: 5px;
  overflow: scroll;
}
</style>