Vue Js Select all text in Textarea

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Select All Text in Textarea</h3>
    <div id="app">
        <div class="textarea-container">
            <textarea v-model="text" rows="5" cols="50"></textarea>
            <button class="select-all" @click="selectAll" :disabled="isSelectAllDisabled">Select All</button>
        </div>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    text: 'fontawesomeicons.com'
                }
            },
            computed: {
                isSelectAllDisabled() {
                    return !this.text.length
                }
            },
            methods: {
                selectAll() {
                    const textarea = this.$el.querySelector('textarea')
                    textarea.focus()
                    textarea.select()
                }
            }

})
    </script>
    <style scoped>
        .textarea-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

textarea {
            height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

textarea:focus {
            outline: none;
            border-color: #007bff;
        }

textarea::selection {
            background-color: yellow;
            color: black;
        }

.select-all {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

.select-all:disabled {
            opacity: 0.5;
            cursor: default;
        }
    </style>

</body>

</html>