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

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

watch(() => customer.name);
</script>

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

                <QInput
                    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>
                    <QBtn label="Submit" type="submit" color="primary" />
                    <QBtn
                        label="Reset"
                        type="reset"
                        color="primary"
                        flat
                        class="q-ml-sm"
                    />
                </div>
            </QForm>
        </QCard>
    </QPage>
</template>

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