Vue Reset Form

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Reset Form Vue 3</h3>
        <form >
            <input type="text" v-model="name" class='input-field' placeholder="Enter Name" /><br><br>
            <input type="email" v-model="email" class='input-field' placeholder="Enter E-mail" /><br><br>
            <textarea v-model="address" class='input-field' placeholder="Enter Address"></textarea><br><br>
        </form>
        <button @click="resetForm">Reset</button>
    </div>
    <script type="module">
        const { createApp, ref } = Vue;

createApp({
            setup() {
                const name = ref('');
                const email = ref('');
                const address = ref('');
               
                const resetForm = () => {
                    name.value = '';
                    email.value = '';
                    address.value = '';
                };

return {
                    name,
                    email,
                    address,
                    resetForm,
                };
            }
        }).mount("#app");
    </script>
    <style scoped>
        .input-field {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s ease;
            width: 300px;
        }

.input-field:focus {
            outline: none;
            border-color: #007bff;
        }
    </style>
</body>
</html>