How to close a div on click in vue js?

I have added a close button to a div in Calendly popup in VueJS and I want to close this div when click on the close button. How can I do this?

This is my Calendly Code:

<TransitionRoot as="template" :show="openTimes">
<Dialog
  as="div"
  class="fixed inset-0 overflow-y-auto"
  @close="closeModal"
  :open="openTimes"
  :initialFocus="closeModalTimesRef"
>

And this is the button I have added

<button type="button" class="close" 
@click="$emit('close')"> X 
 </button>

You probably want to use the v-if directive (or other methods of conditional rendering available in the link).

Usually you set a key like: showDialog: true in your data/state object and add it to your dialog and catch the close event like so:

<script>
  data() {
    return {
      showDialog: true;
    };
  },
</script>
<template>
  <dialog
    v-if="showDialog"
    @close="showDialog = false;"
  />
</template>