Vue Input on Change

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue 3 Input on Change Value</h3>
        <input type="text" v-model="inputValue" @change="handleInputChange" />
        <p>You typed: {{ inputValue }}</p>
    </div>
    <script type="module">
        const { createApp, ref } = Vue;
        createApp({
            setup() {
                const inputValue = ref('');
                const handleInputChange = () => {
                    console.log('Input changed:', inputValue.value);
                };
                return {
                    inputValue,
                    handleInputChange
                };

}
        }).mount("#app");
    </script>
    <style scoped>
         input[type="text"] {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        
        p {
            color: #666;
            margin-top: 5px;
        }
    </style>
</body>

</html>