Vue.js Nuxt 3：从注册表单发出输入值

在我的Nuxt3应用程序中，我试图将邮箱输入字段中输入的值从子组件(SignForm.vue)发出到父组件(Signup.vue)，以便我可以使用它来注册新用户

signup.vue

<script setup>
    const props = {
        fields: [
            "email",
            "password",
            "confirm",
        ],
        header: "Register a new account",
        button: [
            {
                text: "Sign Up",
                color: "green-500",
            }
        ]
    };

    const email = ref('');
    const password = ref('');
    const confirm = ref('');

    function signUp(email) {
        console.log(email)
    
    }
</script>

<template>
    <SignForm :props="props" @method="signUp"/>
</template>

SignForm.vue

<script setup>
    const email = ref('');
    const password = ref('');
    const { props } = defineProps(['props']);
</script>

<template>
    <div class="container">
        <form class="flex flex-col items-center gap-2">
            <p class="text-2xl pb-2">{{ props.header }}</p>
            <input v-for="(pf, index) in props.fields" :key="index"
            :type="[`${pf}` === 'confirm' ? 'password' : `${pf}`]"
            :placeholder="`${pf}`"
            :v-model="`${pf}`"
            class="bg-gray-300 rounded p-2 w-2/5"
            >
            <button type="submit" v-for="(btn, index) in props.button" :key="index"
                class="p-2 text-white rounded w-2/5 text-sm opacity-85 hover:font-bold hover:opacity-100"
                :class="`bg-${ btn.color }`"
                @click.prevent="$emit('method', email)"
                >
                <span>{{ btn.text }}</span>
            </button>
        </form>    
    </div>
</template>

邮箱值仍然没有按预期发出-要么为空，要么为undefined

更新日期 : https://play.vuejs.org/