Password Reset Function Issues

<script>
import { ref, inject, onMounted } from "vue";
import { useForm, useField } from "vee-validate";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import publicApi from "@/publicApi";
import SingleColumn from "@/layouts/SingleColumn.vue";

const authStore = useAuthStore();
const router = useRouter();
const apiUrl = inject<string>("apiUrl");

const showPassword = ref(false);
const alertMessage = ref("");
const alertColor = ref("");
const step = ref(1);
const loading = ref(false);
const otp = ref("");

const items = ["Forget Password", "Reset Password"];

onMounted(() => {
  if (authStore.isAuthenticated) {
    router.push("/dashboard"); // Redirect if already logged in
  }
});

// **Email Form Validation**
const { handleSubmit, handleReset } = useForm({
  validationSchema: {
    email(value: string) {
      return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/i.test(value) || "Must be a valid e-mail.";
    },
  },
});
const email = useField("email");

const password = useField("password");
const confirmPassword = useField("confirmPassword");
const otpField = useField("otp");
// **Password Reset Form Validation**
const { handleSubmit: handleResetSubmit } = useForm({
  validationSchema: {
    password(value: string) {
      return value?.length >= 6 || "Password must be at least 6 characters long.";
    },
    confirmPassword(value: string) {
      return password.value?.value && value === password.value.value || "Passwords do not match.";
    },
    otp(value: string) {
      return value?.length === 6 || "OTP must be 6 digits.";
    },
  },
});



// **Submit Forgot Password**
const submit = handleSubmit(async (values) => {
  loading.value = true;
  alertMessage.value = "";
  alertColor.value = "";

  try {
    const response = await publicApi.post(`${apiUrl}/send-otp-password`, {
      email: values.email,
    });

    loading.value = false;
    if (response.data.success) {
      alertMessage.value = "OTP has been sent successfully!";
      alertColor.value = "success";
      step.value = 2;
    } else {
      alertMessage.value = response.data.message;
      alertColor.value = "error";
    }
  } catch (error: any) {
    loading.value = false;
    alertMessage.value = error.response?.data.message || "Error sending OTP.";
    alertColor.value = "error";
  }
});
// **Submit OTP and Reset Password**
const resetPassword = handleResetSubmit(async (values) => {
  alert("sfaff")
  loading.value = true;
  alertMessage.value = "";
  alertColor.value = "";

  try {
    const response = await publicApi.post(`${apiUrl}/verify-otp-password`, {
      email: email.value.value,
      otp: otp.value,
      password: values.password,
      confirmPassword: values.confirmPassword,
    });

    loading.value = false;
    if (response.data.success) {
      alertMessage.value = "Password reset successfully!";
      alertColor.value = "success";
      router.push("/login");
    } else {
      alertMessage.value = response.data.message;
      alertColor.value = "error";
    }
  } catch (error: any) {
    loading.value = false;
    alertMessage.value = error.response?.data.message || "Error resetting password.";
    alertColor.value = "error";
  }
});
</script>

otp: otp.value, // Instead of just otp

<v-otp-input v-model="otpField.value.value" type="password" variant="solo"></v-otp-input>

const resetPassword = handleResetSubmit(async (values) => {
     console.log("Reset Password Function Triggered", values);
     loading.value = true;
     alertMessage.value = "";
     alertColor.value = "";

     try {
       const response = await publicApi.post(`${apiUrl}/verify-otp-password`, {
         email: email.value.value,
         otp: otpField.value.value,
         password: values.password,
         confirmPassword: values.confirmPassword,
       });

       loading.value = false;
       if (response.data.success) {
         alertMessage.value = "Password reset successfully!";
         alertColor.value = "success";
         router.push("/login");
       } else {
         alertMessage.value = response.data.message;
         alertColor.value = "error";
       }
     } catch (error: any) {
       loading.value = false;
       alertMessage.value = error.response?.data.message || "Error resetting password.";
       alertColor.value = "error";
     }
   });