Issue closing bootstrap vue modal in metronic template

Question

I'm currently working on a Vue.js project where I have a modal for adding organizations. The modal is part of a larger application built with the Metronic Vue template. I'm using the Composition API for managing the state and behavior of the modal.

The modal contains a form for adding organization details, and upon submission of the form, I make an Axios POST request to an API endpoint to add the organization to the database. My goal is to automatically close the modal after the organization has been successfully added.

Here's a simplified version of my code:

<template>
  <div
    class="modal fade"
    tabindex="-1"
    id="kt_modal_new_organization"
    aria-hidden="true"
    ref="modalRef"
  >
    <!-- Modal content -->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from 'axios'

const modalRef = ref<null | HTMLElement>(null);

function closeModal() {
  if (modalRef.value) {
    modalRef.value.hide();
  }
}

async function onSubmit() {
  try {
    await axios.post("http://localhost:5766/api");
    // If the Axios call is successful, close the modal
    closeModal();
  } catch (error) {
    console.error("Error occurred while submitting:", error);
  }
}
</script>

However, I've encountered an issue with closing the modal programmatically. When attempting to call closeModal, I'm receiving an error stating that modalRef.value.hide() is not a function.

I'm looking for guidance on how to properly close the modal after a successful Axios call. Any suggestions or alternative approaches would be greatly appreciated. Thank you!