[Vuejs]-How close Dropdown from vue-bootstrap-dropdown on a button clicked on vue?

• Define showDropdown in data
• Use v-show="showDropdown" on what you want to hide
• Define @click="showDropdown = !showDropdown" on the dropdown header to toggle the dropdown
• Set showDropdown = false on submit

See a working example here

<template>
  <Dropdown>
    <div
      type="button"
      aria-haspopup="true"
      aria-expanded="false"
      @click="showDropdown = !showDropdown"
    >
      Show Dropdown
    </div>
    <div v-show="showDropdown">
      <button
        @click="submit"
      >
        Click me
      </button>
    </div>
  </Dropdown>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data(){
    return {
      showDropdown: false
    }
  },
  methods: {
    submit() {
      this.showDropdown = false;
      // do more
    }
  }
  
});
</script>

If you need it to be a template, you can use v-if instead of v-show