Vue js Scroll div to bottom

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue js Scroll div to bottom </h3>
    <div id="app">
        <div class="scrollable" ref="messages">
            <div v-for="message in messages" :key="message.id" class="message">{{ message.text }}</div>
         </div>
        <button @click="scrollToBottom"> scrollToBottom</button>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    messages: [
                        { id: 1, text: 'item 1' },
                        { id: 2, text: 'item 2' },
                        { id: 3, text: 'item 3' },
                        { id: 4, text: 'item 4' },
                        { id: 5, text: 'item 5' },
                        { id: 6, text: 'item 6' },
                        { id: 7, text: 'item 7' },
                        { id: 8, text: 'item 8' },
                        { id: 9, text: 'item 9' }
                    ],
                };
            },
            methods: {
                scrollToBottom() {
                    const container = this.$refs.messages;
                    container.scrollTop = container.scrollHeight;
                }
            },
        });
    </script>
    <style scoped>
        .scrollable {
            border: 1px solid #ccc;
            padding: 10px;
            height: 200px;
            overflow-y: scroll;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

.scrollable::-webkit-scrollbar {
            width: 8px;
            background-color: #f5f5f5;
        }

.scrollable::-webkit-scrollbar-thumb {
            background-color: #bbb;
            border-radius: 8px;
        }

.message {
            margin-bottom: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

button {
            margin: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

}

button:hover {
            background-color: #0069d9;
        }
    </style>
</body>

</html>