bootstrap 5 myModal.hide() is not work with vue.js - vue.js

Question

sorry I am here again , I can't fix the problem
This is my form input
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input
type="password"
v-model="password"
class="form-control"
id="exampleInputPassword1"
placeholder="請按登入按鈕"
autocomplete="off"
#keyup.enter="login"
data-bs-target="#login"
/>
</div>
this is my function, I imported bootstrap modal.
import { Modal } from 'bootstrap'
login() {
const auth = getAuth();
signInWithEmailAndPassword(auth, this.email, this.password)
.then((userCredential) => {
const user = userCredential.user;
let myModal = new Modal(document.getElementById('login'));
myModal.hide();
Swal.fire({
position: "center",
icon: "success",
title: "登入成功",
showConfirmButton: false,
timer: 1500,
});
this.$router.replace("admin");
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
if (errorCode === "auth/wrong-password") {
// 密碼錯誤提醒
Swal.fire({
position: "center",
icon: "error",
title: "密碼錯誤",
showConfirmButton: false,
timer: 2000,
});
} else {
// 其他錯誤提醒
Swal.fire({
position: "center",
icon: "error",
title: "密碼錯誤或信箱尚未註冊",
showConfirmButton: false,
timer: 2000,
});
}
console.log(error);
});
},
I use this syntax and it works fine elsewhere, wWhen I press enter in the password input box to jump to the admin page, the modal will be hidden, how sould I do ?
let myModal = new Modal(document.getElementById('login'));
myModal.hide();