vue-click-outsideを実装し、ドロップダウンメニューを開き、 メニュー以外（リンク以外の場所）をクリックしたら非表示にするようにしたい。

Question

【Vue.jsライブラリ】vue-click-outsideを実装したい！

下記、参考にさせていただきvue-click-outsideを実装し、ドロップダウンメニューを開き、
メニュー以外（リンク以外の場所）をクリックしたら非表示にするようにしたいです。

※現状は、クリックで表示・非表示のみです。。

【簡単】vue-click-outsideライブラリを使ってみた
枠外をクリックして閉じれるドロップダウンの実装

参考しにて実際に記述してみましたが、上手く実装されません・・
もし分かる方いらっしゃいましたらお力添えをいただきたいです。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

<template>
  <header class="header">
    <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inema</router-link
    >
    <ul class="header-menu">
      <li>
        <router-link to="/first" class="header-link">初めての方へ</router-link>
      </li>
      <li>
        <router-link to="/signup" class="header-link" v-if="authenticatedUser"
          >新規登録</router-link
        >
      </li>
      <li>
        <router-link to="/signin" class="header-link" v-if="authenticatedUser"
          >ログイン</router-link
        >
      </li>
      <li>
        <span class="dropdown-menu" v-click-outside="close" @click="open">
          <a class="header-link"
            >マイページ<span class="dropdown-arrow"></span
          ></a>
          <ul class="dropdown" :class="{ isOpen }">
            <li class="dropdown-items">
              <router-link to="/mypage" class="dropdown-link"
                >マイページ</router-link
              >
            </li>
            <li class="dropdown-items">
              <router-link to="/profile" class="dropdown-link"
                >プロフィール編集</router-link
              >
            </li>
            <li class="dropdown-items" v-if="authenticatedUserSignout">
              <button
                class="dropdown-link"
                @click="signOut"
                v-if="authenticatedUserSignout"
              >
                ログアウト
              </button>
            </li>
          </ul>
        </span>
      </li>
    </ul>
  </header>
</template>

<script>
import firebase from "firebase";
import ClickOutside from "vue-click-outside";

export default {
  name: "signOut",
  data() {
    return {
      authenticatedUser: "",
      authenticatedUserSignout: "",
      isOpen: false,
    };
  },
  methods: {
    //ログアウトを実装
    signOut: function() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          // alert("ログアウトしました。");
          this.$router.push("/signin");
        })
        .catch(() => {
          // alert("ログアウトができません。");
        });
    },
    open: function() {
      this.isOpen = !this.isOpen;
    },
  },
  mounted() {
    //以下、ユーザーが認証済みであれば「ログイン」と「新規登録」を非表示
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.authenticatedUser = false;
      } else {
        this.authenticatedUser = true;
      }
    });
    //以下、ユーザーが認証済みであれば「ログアウト」を表示
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.authenticatedUserSignout = true;
      } else {
        this.authenticatedUserSignout = false;
      }
    });
    this.popupItem = this.$el;
  },
  //directivesオプションを使用することにより、ローカルディレクティブに登録されるため、機能を使える
  directives: {
    ClickOutside,
  },
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");

.header {
  position: sticky;
  top: 0;
  background-color: #000000;
  padding: 1rem 3rem;
  z-index: 999;
  display: flex;
  align-items: center;
  &-ttl {
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: "Roboto", sans-serif;
    &-color {
      color: grey;
      font-size: 2.5rem;
    }
  }
  &-menu {
    display: flex;
    margin-left: auto;
    .dropdown-menu {
      position: relative;
      display: flex;
      .dropdown-link {
        color: #fff;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
        text-decoration: none;
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        cursor: hand;
        &:hover {
          color: grey;
        }
      }
    }
  }
  &-link {
    color: #fff;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    text-decoration: none;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    margin-left: 3rem;
    &:not(:first-child) {
      margin-left: 2rem;
    }
    &:hover {
      color: #bbb;
    }
  }
}

.dropdown-arrow {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 9px;
  right: -20px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid white;
  .header-link:hover & {
    border-top-color: #bbb;
  }
}

.dropdown {
  width: 10rem;
  height: auto;
  position: absolute;
  top: 50px;
  right: -47px;
  display: none;
  background-color: #000000;
  &-items {
    padding: 1rem;
    border-bottom: 1px solid #fff;
  }
}

.isOpen {
  display: block;
}

a.header-ttl:hover,
a.header-ttl:hover span {
  color: #bbb;
}
</style>

Answer 1

closeの記述漏れが発覚しました。訂正したら正常に実装できました。