App.vue

<template>
 <div id="app">
  <div>
  <button
    ref="btn1"
    class="toggle-button"
  >
    Open Country Popup
  </button>
  <div
    v-clickoutside="{
      exclude: ['btn1']
    }"
    class="popup-box"
  >
    <ul>
      <li>IN</li>
      <li>US</li>
      <li>CA</li>
      <li>SA</li>
      <li>UAE</li>
    </ul>
  </div>
 </div>

  
   <div>
  <button
    ref="btn2"
    class="toggle-button"
  >
    Open State Popup
  </button>
  <div
    v-clickoutside="{
      exclude: ['btn2']
    }"
    class="popup-box"
  >
    <ul>
      <li>PA</li>
      <li>CA</li>
      <li>KJ</li>
      <li>MO</li>
      <li>TR</li>
    </ul>
  </div>
 </div>

</div>

</template>

<script>

let handleOutsideClick
Vue.directive('clickoutside', {
  bind (el, binding, vnode) {
    handleOutsideClick = (e) => {
      e.stopPropagation();
      console.log('test')
      const { exclude } = binding.value;
      
      if(vnode.context.$refs[exclude[0]].contains(e.target)){
        if(!el.classList.contains('show')){
          el.classList.add('show')
        }else{
          el.classList.remove('show')
        }
      }else{
        // if( !el.contains(e.target))
         el.classList.remove('show')
      }    
      
    }
    document.addEventListener('click', handleOutsideClick)
    document.addEventListener('touchstart', handleOutsideClick)
  },

  unbind () {
    document.removeEventListener('click', handleOutsideClick)
    document.removeEventListener('touchstart', handleOutsideClick)
  }
})

export default {
	name:"app"
}
</script>

<style>
#app {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  flex-direction: row;
  width: 600px;
  margin: 0 auto;
}

.toggle-button {
  background: #1188FF;
  color: #FFF;
  border: 0;
  border-radius: 2px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: 0.2s all;
}

#app > div{
  
  flex:0 0 50%;
}
.toggle-button:hover {
  background: #1080F8;
}
 
.popup-box {
  display:none;
  width:150px;
  background: #F0F8FF;
  border-radius: 1px;
  box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.2);
  color: #555585;
}
.popup-box.show{
  display:block;
}
.popup-box ul{
  list-style:none;
  padding-top:20px;
  margin:0px;
  padding-left:0px;
}
.popup-box ul li{
  list-style:none;
  font-size:16px;
  cursor:pointer;
  padding-bottom:15px;
   padding:10px;
}
.popup-box ul li:hover{
  background:#c3c3c3;
 
}
</style>