javascript – Display dropdowns dynamically in one component

I want to have multiple dropdowns in one component using one variable to display or not and also clicking away from their div to close them:

<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>
// second dropdown in same component
<div class="dropdown">
  <button @click.prevent="isOpen = !isOpen"></button>
    <div v-show="isOpen">Content</div>
</div>
data() {
 return {
   isOpen: false
  }
},
watch: {
  isOpen(isOpen) {
     if(isOpen) {
      document.addEventListener('click', this.closeIfClickedOutside)
 }
},
 methods: {
  closeIfClickedOutside(event){
   if(! event.target.closest('.dropdown')){
       this.isOpen = false;
     }
   }

But now when I click one dropdown menu it displays both of them. I am kinda new to vue and cant find way to solve this