VueJs and Laravel dom contents not updating - laravel

Question

I have this method when I click to view any member it shows the detail of the member in the modal, but it's not working as I expected
vue js code
const member_modal = ref(null);
const viewMember = (member) => {
axios.get("/api/member/" + member.id).then((response) => {
member_modal.value = response.data;
console.log(member_modal.value);
$("#viewMemberModal").modal("show");
});
};
code inside the modal (DOM)
<a href="#" #click.prevent="viewMember(member)"
><i class="fa fa-eye ml-2"></i
></a>
<img class="profile-user-img img-fluid img-circle"
src="{{ member_modal.image }}"
alt="User profile picture"
/>
</div>
<h3 class="profile-username text-center">
{{ member_modal.full_name }}
</h3>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Gender</b>
<a class="float-right">{{ member_modal.gender }}</a>
</li>
<li class="list-group-item">
<b>Phone</b>
<a class="float-right">{{ member_modal.phone }}</a>
</li>
<li class="list-group-item">
<b>Email</b>
<a class="float-right">{{ member_modal.email }}</a>
</li>
</ul>
I want when I click on the view member button it shows the specific member data in the modal, but it's not updating the values in the (dom), when I click the view member, it fetches the data from the database successfully and assigns the response result to the member_modal but the change is not showing the data in the modal