Emitting an input value from a sign up form

In my Nuxt3 application, I'm trying to emit the value entered in an email input field from a child component (SignForm.vue) to the parent component (signup.vue) so I can use it to register a new user

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>

The email value still isn't being emitted as expected - it's either empty or undefined

UPDATED: https://play.vuejs.org/

Problem with the above code is that you are trying to bind string value, instead of reactive value because of this there is no change shown in the email from the SignForm.vue.

Easy solution of this would be to create a reactive object with stores the key: field name and value: input value. It can done using both ref or reactive functions

Vue Playground

SOLUTION

<script setup>
  import { ref } from 'vue'
  const form = ref({
    email: '',
    password: '',
  });
  const { props } = defineProps(['props']);
</script>

<template>
  <div>
    <form>
      <p>{{ props.header }}</p>
      <input v-for="pf in props.fields" 
      :type="`${pf}`"
      :placeholder="`${pf}`"
      v-model="form[pf]"
      >
      <button type="submit" v-for="btn in props.button" 
        @click.prevent="$emit('method', form.email)"
        >
        {{ btn.text }}
      </button>
    </form>    
  </div>
</template>