Toggling A boolean property in Vuejs is Not working

Question

I have a Vue component that has Container that I use v-if to control its visibility.

I set isModalOpen to false ant first but When I create a function to toggle the property to true but it seems it's not working and this is not the first time I am experiencing this.

I have tried everything I can, but I cant get to display the modal after toggling it to true. If I console log the state of isModalOpen I get true and Virce versa

My Console Show That the Modal Is Open but contrary to what I have on my screen

The Modal I should get When isModalOpen is true

<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <div class="flex flex-row items-center px-4 justify-between text-white">
      <div class="text-xl"><i class="fa-solid fa-angles-left"></i></div>
    </div>
    <div class="text-2xl font-bold text-white">Transactions</div>
    <!-- The Container -->
    <div class="bg-white h-[100%] mt-5 rounded-tr-xl rounded-tl-xl py-2">
      <!-- Filter menus -->
      <div class="flex justify-between px-4 py-4">
        <div class="filter__menus space-x-4">
          <span>All</span>
          <i class="fa-solid fa-angle-down"></i>
        </div>
        <div class="filter__menus space-x-4">
          <span @click="toggleIsModelOpen()">Transaction-type</span>
          <i class="fa-solid fa-angle-down"></i>
        </div>
      </div>

      <!-- Transactions According to Pages-->
      <div v-if="viewPage === 0">
        <div
          v-for="transaction in walletTransactions"
          :key="transaction.id"
          class="assets__trnsactions"
        >
          <div v-if="transaction.transactionType === 'Deposited'" class="deposited">
            <i class="fa-solid fa-arrow-down"></i>
          </div>
          <div v-if="transaction.transactionType === 'Sent'" class="sent">
            <i class="fa-solid fa-arrow-down"></i>
          </div>
          <div v-if="transaction.transactionType === 'Withdrawn'" class="withdraw">
            <i class="fa-solid fa-arrow-down"></i>
          </div>
          <div>
            <p class="flex font-bold">${{ transaction.value }}</p>
            <p>{{ transaction.coins }} {{ transaction.coinType }}</p>
          </div>
          <div>
            <p class="font-bold text-red-500">{{ transaction.transactionType }}</p>
            <p>{{ transaction.date }}</p>
          </div>
        </div>
      </div>
      <div v-if="viewPage === 1">
        <!-- Widthdrawn -->
      </div>
      <div v-if="viewPage === 2">
        <!-- Deposited -->
      </div>
      <div v-if="viewPage === 3">
        <!--  -->
      </div>
      <div v-if="isModalOpen">
        <div class="image__blur__filters" />
        <div class="modal__filters">
          <div class="flex items-center justify-between px-4 font-bold text-xl">
            <span>Transaction type</span>
            <span @click="changePageView()" class="text-[#347AF0] cursor-pointer"
              >Done</span
            >
          </div>
          <div class="mt-4 mb-4">
            <span
              class="canecel_filter bg-[#F1F5FB] rounded-md text-[#347AF0] font-bold cursor-pointer shadow-md"
              >Cancel</span
            >
          </div>
          <div
            v-for="category in transactionCateogory"
            :key="category.type"
            class="flex items-center space-x-4 px-4 mt-2"
          >
            <div class="category__filter rounded-full bg-[#F1F4FB]">
              <i :class="category.icon" />
            </div>
            <div class="flex-1 font-bold text-lg">{{ category.type }}</div>
            <div>
              <input
                type="radio"
                name="radioSelection"
                :value="category.type"
                :id="category.type"
                v-model="optionSelect"
                style="height: 25px; width: 25px; vertical-align: middle"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Vue Class Component

<script lang="ts">
import { mixins } from "vue-class-component";
import { Authenticated, Global } from "../mixins/mixins";
export default class Transactions extends mixins(Global, Authenticated) {
  viewPage = 0;
  optionSelect = "";
  viewMenu = false;
  isModalOpen = false;
 
  transactionCateogory: any = [
    { type: "Deposited", icon: "fa-solid fa-circle-arrow-up" },
    { type: "Sent", icon: "fa-solid fa-circle-right" },
    { type: "Withdrawn", icon: "fa-solid fa-circle-arrow-down" },
  ];
  toggleIsModelOpen() {
    this.isModalOpen = !this.isModalOpen;
    if (this.isModalOpen) {
      window.console.log("Modal Open");
    } else {
      window.console.log("Modal Closed");
    }
  }

  navigateBack() {
    this.$router.push("/").catch(() => undefined);
  }
  changePageView() {
    window.console.log("radio chosen", this.optionSelect);
  }
}
</script>