How to open modal in vue - vue.js

Question

Currently, I'm making a modal in vue3
I would like to use the modal component provided by bootstrap.
I try to make the modal window pop up when I press the delete comment button.
Therefore, when the value of delete_show becomes true, the conditions were set so that the modal would appear.
However, modals do not appear.
Modal-related codes and component-related codes are located together in one component.
What should I do to make the modal appear?
<template>
<div
class="modal"
tabindex="-1"
v-if="delete_show == true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
댓글 삭제
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<p>댓글을 삭제하시겠습니까?</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
취소
</button>
<button
type="button"
#click="commentDelete"
class="btn btn-primary">
삭제
</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="commentListWrapper">
<ul class="commentBoxWrapper">
<li class="comments">
<div class="commentArea">
<div class="commentAreaTop">
<div class="commentUser">
{{ userComment.userId }}
</div>
<div class="commentRating">
{{ userComment.starRate }}
</div>
</div>
<div
class="commentText"
v-if="edit">
{{ userComment.comment }}
</div>
<div
v-else
class="commentFixArea">
<textarea
class="commentFixBox"
v-model="userComment.comment"></textarea>
</div>
<div
v-if=" userComment.userId === this.$store.state.loginService.UserInfoObj.id && edit"
class="commentMethods">
<div class="commentFix">
<span #click="changeEdit">수정</span>
</div>
<div class="commentDelete">
<span #click="changeModalStatus">삭제</span>
</div>
</div>
<div
class="editButton"
v-else-if="!edit">
<button
type="button"
#click="commentFix"
class="btn btn-primary btn-sm">
저장
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>