Unable to submit form by using #submit in vue 3 - html

Question

I encountered a issue using the vuejs #submit.prevent in my login form. When I clicked the login button it doesn't work in my website. And I did the catch error in the function but the console still show nothing. Please help. What I trying to do is when the clicking the form then it will submit the value to my login() function in methods and it will call my laravel back-end API for validate the user information.
Here is the following code below:
<template>
<section class="container mt-3">
<div class="row content d-flex justify-content-center align-items-center">
<div class="col-md-5">
<div class="box shadow bg-white p-4">
<h3 class="mb-4 text-center fs-1">Login Form</h3>
<form #submit.prevent="login()" class="mb-3">
<div class="form-floating mb-3">
<input type="email" class="form-control rounded-0" v-model="form.email" id="floatingInput" placeholder="name#email.com">
<label for="floatingInput">Email</label>
</div>
<div class="form-floating ">
<input type="password" class="form-control rounded-0" v-model="form.password" id="floatingPassword" placeholder="password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" id="autoSizingCheck2" class="form-check-input">
<label class="form-check-label">Remember me</label>
</div>
<div class="d-grid gap-2 mb-3">
<button type="button" class="btn btn-dark btn-lg border-0 rounded-0">
Login
</button>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="#" title="Forgot Password" class="text-decoration-none">
Forgot Passowrd?
</router-link>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="register" title="Forgot Password" class="text-decoration-none">
Don't have an accounts?
</router-link>
</div>
<div class="sign-up-accounts">
<p class="text-center">
Or Sign up with
</p>
<div class="social-accounts d-flex justify-content-center">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
import store from '../store';
import router from '../router';
export default {
name:'Login',
data(){
return {
form:{
email:'',
password:''
},
}
},
methods: {
login() {
store.dispatch('login', this.form)
.then(res=>{
router.push('/');
}).catch(error=>{
console.log(error);
});
},
}
}
</script>
<style scoped>
</style>`````
Here is the store file:
state:{
user:{
data:{},
token:sessionStorage.getItem("Token"),
}
},
actions:{
login({commit}, user){
axiosClient.post('/login', {email:user.data.email, password:user.data.password})
.then(res=>{
console.log(res.data.token);
console.log(res);
res.data.email = user.email;
res.data.password = user.password;
commit('authUsers', res);
})
},
mutations:
authUsers: (state, userData)=> {
state.user.data = userData.data.email;
state.user.token = userData.data.token;
console.log(userData);
sessionStorage.setItem('Token', userData.data.token);
sessionStorage.setItem('Email', userData.data.email);
},

Answer 1

This issue was solved by remove a type="button" in the login button