Vue Js Auto Resize Textarea

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Auto Resize Textarea</h3>
    <div id="app">
        <textarea ref="textarea" v-model="text" @input="resizeTextarea" placeholder='Write Comment'rows="1"></textarea>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    text: ''
                };
            },
            mounted() {
                this.resizeTextarea();
            },
            methods: {
                resizeTextarea() {
                    this.$refs.textarea.style.height = "auto";
                    this.$refs.textarea.style.height = `${this.$refs.textarea.scrollHeight}px`;
                },
            },
        })
</script>
<style scoped>
        textarea {
            resize: none;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
        }
 </style>
</body>
</html>