<script setup>
import { reactive, watch } from 'vue';

const customer = reactive({
    name: '',
});

watch(
    () => customer.name,
    () => {
        console.log('customer.name changed');
    }
);
</script>

<template>
    <q-page class="q-pa-md">
        <q-card class="q-pa-md">
            <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
                <q-input
                    filled
                    v-model="customer.name"
                    label="Your name *"
                    hint="Name and surname"
                    lazy-rules
                    :rules="[(val) => (val && val.length > 0) || 'Please type something']"
                />

                <q-input
                    filled
                    type="number"
                    v-model="age"
                    label="Your age *"
                    lazy-rules
                    :rules="[
                        (val) => (val !== null && val !== '') || 'Please type your age',
                        (val) => (val > 0 && val < 100) || 'Please type a real age',
                    ]"
                />

                <div>
                    <q-btn label="Submit" type="submit" color="primary" />
                    <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
                </div>
            </q-form>
        </q-card>
    </q-page>
</template>

<style lang="scss" scoped>
.card {
    width: 100%;
    max-width: 60em;
}
</style>
