vue-click-outsideライブラリを使って、特定の要素以外をクリックした時にイベントを発火させる

$ npm install vue-click-outside

<template>
    <div>
      <button
        v-click-outside="onOutsideClick"
        @click="onClick">
        クリック
      </button>
      {{ message }}
    </div>
</template>

<script>
// vue-click-outsideライブラリをインポートする
import ClickOutside from 'vue-click-outside'

export default {
  data() {
    return {
      message: ''
    }
  },

  methods: {
    // クリックボタンの要素外を押した時に発火する
    onOutsideClick() {
      this.message = 'クリックボタン以外を押したよ！'
    },

    // クリックボタンを押した時に発火する
    onClick () {
      this.message = 'クリックボタンを押したよ！'
    },
  },

  /*
    directivesオプションを使用して、ローカルディレクティブに登録することで、
    ライブラリの機能を使用することができる
  */
  directives: {
    ClickOutside
  }
}
</script>