Dynamic Textbox Color Change in Vue JS Based on Value

<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <h3>Vue Js Change the color of the textbox Based on its value</h3>
    <div id="app">
        <textarea type="text" v-model="value" :class="inputClass"></textarea>
        <p>When the length of the text is 10 or less, change the background color to red. If the text length is 10 or
            greater, modify the background color to green.</p>

</div>
 <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    value: '',
                    threshold: 10,
                }
            },
            computed: {
                inputClass() {
                    return {
                        'red': this.value.length >= this.threshold,
                        'green': this.value.length < this.threshold,
                    }
                }
            }
        });
   app.mount("#app");
 </script>
 <style>
        .red {
            background-color: #FF0000; /* Red */
        }

.green {
            background-color: #00FF00; /* Green */
        }
</style>
</body>
</html>