【Vue x Firebase】セレクトボックス選択後にもxボタンでモーダルウィンドウを閉じれるようにしたいです。

#セレクトボックス選択後にもxボタンでモーダルウィンドウを閉じれるようにしたいです。

モーダルウィンドウでプロフィール編集画面を設けており、
単純にモーダルウィンドウを開く・閉じるの動作は出来るのですが、
なぜか写真のようにセレクトボックスを選択した後にxボタンで閉じようとしても発火しないです。。

原因が調べても分からず困っています。。
分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願いいたします。

html
1<template>
2
3　　     ~~ 省略 ~~
4 
5          <modal
6            class="modal-inner"
7            v-scroll-lock="open"
8            name="edit"
9            :width="1100"
10            :height="740"
11          >
12            <div data-modal="edit" aria-expanded="true" class="vm--overlay">
13              <div class="vm--top-right-slot"></div>
14            </div>
15            <div class="modal-header flex">
16              <h2 class="profile-tll flex">プロフィールを編集する</h2>
17              <hr class="separate" />
18
19　　        ~~ 省略 ~~
20  
21                  <div class="line"></div>
22                  <div class="profile-items flex">
23                    <div class="profile-contens flex">
24                      <input
25                        type="text"
26                        class="profile-item"
27                        placeholder="名前"
28                        v-model="name"
29                      />
30                    </div>
31                    <div class="profile-contens flex">
32                      <select
33                        class="profile-select"
34                        v-model="sex"
35                        :style="{ color: sex == '' ? 'gray' : 'white' }"
36                      >
37                        <option class="profile-item" value hidden>性別</option>
38                        <option
39                          v-for="sex in sexs"
40                          :value="sex.name"
41                          :key="sex.id"
42                          class="profile-item"
43                          style="color: white;"
44                          >{{ sex.name }}</option
45                        >
46                      </select>
47                    </div>
48
49　　          ~~ 省略 ~~
50 
51                  <button
52                    class="hide-btn flex"
53                    @click="
54                      hide();
55                      closeModal();
56                    "
57                  >
58                    ×
59                  </button>
60
61　　           ~~ 省略 ~~
62 
63  </div>
64</template>
65

js
1<script>
2import firebase from "firebase";
3import Header from "@/components/header.vue";
4import Vue from "vue";
5import VueSwal from "vue-swal";
6Vue.use(VueSwal);
7import VModal from "vue-js-modal";
8Vue.use(VModal);
9import VScrollLock from "v-scroll-lock";
10Vue.use(VScrollLock);
11import VueTextareaAutosize from "vue-textarea-autosize";
12Vue.use(VueTextareaAutosize);
13
14export default {
15  data() {
16    return {
17      name: "",
18      sex: "",
19      sexs: [{ name: "男性" }, { name: "女性" }, { name: "その他" }],
20      age: "",
21      ages: [
22        { name: "10際未満" },
23        { name: "10 ~ 19歳" },
24        { name: "20 ~ 29歳" },
25      access: "",
26      accesses: [
27        { name: "北海道" },
28        { name: "青森県" },
29      ],
30      profession: "",
31      professions: [
32        { name: "公務員" },
33        { name: "会社員" },
34        { name: "自営業" },
35      ],
36      selfpr: "",
37      genre: "",
38      genres: [
39        { id: 0, name: "ジャンル" },
40        { id: 1, name: "アクション" },
41      ],
42      favMovie: "",
43      uploadedImage: "",
44      profileData: {},
45      open: false,
46    };
47  },
48  components: {
49    Header,
50  },
51  methods: {
52    updateBtn() {
53      firebase
54        .firestore()
55        .collection("users")
56        .doc(this.$route.params.uid)
57        .set(
58          {
59            name: this.name,
60            sex: this.sex,
61            age: this.age,
62            access: this.access,
63            selfpr: this.selfpr,
64            profession: this.profession,
65            uploadedImage: this.uploadedImage,
66            genre: this.genre,
67            favMovie: this.favMovie,
68            time: firebase.firestore.FieldValue.serverTimestamp(),
69          },
70          { merge: true }
71        );
72      this.$swal({
73        title: "内容確認",
74        text: "この内容で投稿しますか？",
75        icon: "info",
76        buttons: true,
77        dangerMode: true,
78      }).then((willDelete) => {
79        if (willDelete) {
80          this.$swal("投稿しました。", {
81            icon: "success",
82          });
83          this.$router.go({
84            path: `/mypage/${this.$route.params.uid}`,
85            force: true,
86          });
87        } else {
88          this.$swal("キャンセルしました。");
89        }
90      });
91    },
92    show() {
93      this.$modal.show("edit");
94    },
95    hide() {
96      this.$modal.hide("edit");
97    },
98    openModal() {
99      this.open = true;
100    },
101    closeModal() {
102      this.open = false;
103    },
104  },
105  created() {
106    const currentUser = firebase.auth().currentUser;
107
108    if (currentUser) {
109      firebase
110        .firestore()
111        .collection("users")
112        .doc(this.$route.params.uid)
113        .get()
114        .then((snapshot) => {
115          this.profileData = snapshot.data();
116        });
117    }
118  },
119
120　　           ~~ 省略 ~~
121 
122</script>
123