Почему я получаю эту ошибку, когда пытаюсь использовать несколько defineModels в vue.js?

Я пытаюсь использовать директиву v-model для двух входных элементов. Однако я получаю следующую ошибку: повторяющееся имя модели «modelValue». Ниже я показываю код, который генерирует эту ошибку:

Шаблон:

<template>
  <h2>Login</h2>
  <form class = "row mx-5" @submit.prevent = "login">


    <div class = "col-12 col-md-6 form-field">
      <label for = "email" class = "form-label">Correo</label>
      <input type = "text" class = "form-control" id = "email" v-model = "email" placeholder = "Ingrese el correo">
    </div>
    <div class = "col-12 col-md-6 form-field">
      <label for = "password" class = "form-label">Contraseña</label>
      <input type = "text" class = "form-control" id = "password" v-model = "password" placeholder = "Ingrese la contraseña">
    </div>

    <div class = "col-12">
      <button class = "btn btn-primary">Login</button>
    </div>
  </form>
</template>

Скрипт:

<script lang = "ts" setup>
import { defineModel, onBeforeUpdate, } from "vue";

const email = defineModel();
const password = defineModel();


const login = (e: Event) => {
  console.info(email.value, password.value);
  
};

</script>