Rewrite deprecated lifecycle method

2022-04-22 01:15:29 +09:00 · 2022-04-22 01:15:29 +09:00 · 7f4b090123
parent 3400f0849b
commit 7f4b090123
33 changed files with 273 additions and 588 deletions
--- a/package.json
+++ b/package.json
@ -104,7 +104,6 @@
    "tunnel-agent": "^0.6.0",
    "unicode-emoji-json": "^0.3.1",
    "vue": "^3.2.31",
-    "vue-click-outside": "^1.1.0",
    "vue3-i18next": "^0.1.0",
    "vue-popperjs": "^2.3.0",
    "vue-resize": "^2.0.0-alpha.1",
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -37,7 +37,7 @@ export default {
      this.$i18n.locale = conf.language.language
    })
  },
-  destroyed() {
+  unmounted() {
    this.$store.dispatch('App/removeShortcutsEvents')
  }
 }
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@ -90,10 +90,10 @@ export default {
      })
    })
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$off('focus-timeline')
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Bookmarks/updateBookmarks', [])
    if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
      document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@ -116,7 +116,7 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    if (!this.unreadNotification.direct) {
      this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
      this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
@ -124,7 +124,7 @@ export default {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
    if (!this.unreadNotification.direct) {
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@ -83,10 +83,10 @@ export default {
      })
    })
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$off('focus-timeline')
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
    if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
      document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@ -131,7 +131,7 @@ export default {
      }
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
    this.reset()
    Event.$off('focus-timeline')
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@ -136,11 +136,11 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
    if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@ -131,11 +131,11 @@ export default {
      }
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
    this.$store.commit('TimelineSpace/Contents/Lists/Show/clearTimeline')
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@ -116,7 +116,7 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    if (!this.unreadNotification.local) {
      this.$store.dispatch('TimelineSpace/stopLocalStreaming')
      this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
@ -124,7 +124,7 @@ export default {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
    if (!this.unreadNotification.local) {
--- a/src/renderer/components/TimelineSpace/Contents/Mentions.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Mentions.vue
@ -124,11 +124,11 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unounted() {
    this.$store.commit('TimelineSpace/Contents/Mentions/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Mentions/archiveMentions')
    if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@ -122,11 +122,11 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Notifications/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Notifications/archiveNotifications')
    if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@ -117,7 +117,7 @@ export default {
      this.scrollPosition.prepare()
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    if (!this.unreadNotification.public) {
      this.$store.dispatch('TimelineSpace/stopPublicStreaming')
      this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
@ -125,7 +125,7 @@ export default {
    Event.$off('focus-timeline')
    this.observer.disconnect()
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
    this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
    if (!this.unreadNotification.public) {
--- a/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Account.vue
@ -1,19 +1,8 @@
 <template>
  <div id="search_account">
-    <DynamicScroller
-      :items="results"
-      :min-item-size="20"
-      class="scroller"
-      page-mode
-    >
+    <DynamicScroller :items="results" :min-item-size="20" class="scroller" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.acct]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.acct]" :data-index="index" :watchData="true">
          <user :user="item"></user>
        </DynamicScrollerItem>
      </template>
@ -30,14 +19,11 @@ export default {
  components: { User },
  computed: {
    ...mapState({
-      results: (state) => state.TimelineSpace.Contents.Search.Account.results,
-    }),
-  },
-  destroyed() {
-    this.$store.commit(
-      'TimelineSpace/Contents/Search/Account/updateResults',
-      []
-    )
+      results: state => state.TimelineSpace.Contents.Search.Account.results
+    })
  },
+  unmounted() {
+    this.$store.commit('TimelineSpace/Contents/Search/Account/updateResults', [])
+  }
 }
 </script>
--- a/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
@ -1,20 +1,8 @@
 <template>
  <div id="search_tag">
-    <DynamicScroller
-      :items="results"
-      :min-item-size="46"
-      key-field="name"
-      class="scroller"
-      page-mode
-    >
+    <DynamicScroller :items="results" :min-item-size="46" key-field="name" class="scroller" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.name]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.name]" :data-index="index" :watchData="true">
          <tag :tag="item"></tag>
        </DynamicScrollerItem>
      </template>
@ -31,11 +19,11 @@ export default {
  components: { Tag },
  computed: {
    ...mapState('TimelineSpace/Contents/Search/Tag', {
-      results: (state) => state.results,
-    }),
+      results: state => state.results
+    })
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Search/Tag/updateResults', [])
-  },
+  }
 }
 </script>
--- a/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
@ -1,19 +1,8 @@
 <template>
  <div id="search_account">
-    <DynamicScroller
-      :items="results"
-      :min-item-size="60"
-      class="scroller"
-      page-mode
-    >
+    <DynamicScroller :items="results" :min-item-size="60" class="scroller" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.uri]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
          <toot :message="item"></toot>
        </DynamicScrollerItem>
      </template>
@ -30,11 +19,11 @@ export default {
  components: { Toot },
  computed: {
    ...mapState({
-      results: (state) => state.TimelineSpace.Contents.Search.Toots.results,
-    }),
+      results: state => state.TimelineSpace.Contents.Search.Toots.results
+    })
  },
-  destroyed() {
+  unmounted() {
    this.$store.commit('TimelineSpace/Contents/Search/Toots/updateResults', [])
-  },
+  }
 }
 </script>
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@ -52,7 +52,7 @@ export default {
      return !this.overlaid
    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    this.close()
  },
  methods: {
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Followers.vue
@ -1,34 +1,14 @@
 <template>
  <div id="followers">
-    <DynamicScroller
-      :items="followers"
-      :min-item-size="53"
-      class="scroller"
-      page-mode
-    >
+    <DynamicScroller :items="followers" :min-item-size="53" class="scroller" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.item]"
-          :data-index="index"
-          :watchData="true"
-        >
-          <user
-            :user="item"
-            :relationship="targetRelation(item.id)"
-            @followAccount="followAccount"
-            @unfollowAccount="unfollowAccount"
-          >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.item]" :data-index="index" :watchData="true">
+          <user :user="item" :relationship="targetRelation(item.id)" @followAccount="followAccount" @unfollowAccount="unfollowAccount">
          </user>
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
-    <div
-      class="loading-card"
-      v-loading="lazyLoading"
-      :element-loading-background="backgroundColor"
-    ></div>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
  </div>
 </template>

@ -42,13 +22,13 @@ export default {
  components: { User },
  computed: {
    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Followers', {
-      followers: (state) => state.followers,
-      relationships: (state) => state.relationships,
-      lazyLoading: (state) => state.lazyLoading,
+      followers: state => state.followers,
+      relationships: state => state.relationships,
+      lazyLoading: state => state.lazyLoading
    }),
    ...mapState('App', {
-      backgroundColor: (state) => state.theme.background_color,
-    }),
+      backgroundColor: state => state.theme.background_color
+    })
  },
  created() {
    this.load()
@ -56,127 +36,78 @@ export default {
  watch: {
    account: function (_newAccount, _oldAccount) {
      this.load()
-    },
+    }
  },
  mounted() {
-    document
-      .getElementById('sidebar_scrollable')
-      .addEventListener('scroll', this.onScroll)
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
  },
-  destroyed() {
-    if (
-      document.getElementById('sidebar_scrollable') !== undefined &&
-      document.getElementById('sidebar_scrollable') !== null
-    ) {
-      document
-        .getElementById('sidebar_scrollable')
-        .removeEventListener('scroll', this.onScroll)
+  unmounted() {
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
    }
  },
  methods: {
    async load() {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        const followers = await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers',
-          this.account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships',
-          followers
-        )
+        const followers = await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', this.account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships', followers)
      } catch (err) {
        this.$message({
          message: this.$t('message.followers_fetch_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
    },
    onScroll(event) {
      // for lazyLoading
      if (
-        event.target.clientHeight + event.target.scrollTop >=
-          document.getElementById('account_profile').clientHeight - 10 &&
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
        !this.lazyloading
      ) {
-        this.$store
-          .dispatch(
-            'TimelineSpace/Contents/SideBar/AccountProfile/Followers/lazyFetchFollowers',
-            this.account
-          )
-          .catch((err) => {
-            console.error(err)
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
-              type: 'error',
-            })
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/lazyFetchFollowers', this.account).catch(err => {
+          console.error(err)
+          this.$message({
+            message: this.$t('message.timeline_fetch_error'),
+            type: 'error'
          })
+        })
      }
    },
    targetRelation(id) {
-      return this.relationships.find((r) => r.id === id)
+      return this.relationships.find(r => r.id === id)
    },
    async followAccount(account) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/follow',
-          account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships',
-          this.followers
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/follow', account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships', this.followers)
      } catch (err) {
        this.$message({
          message: this.$t('message.follow_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
    },
    async unfollowAccount(account) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/unfollow',
-          account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships',
-          this.followers
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unfollow', account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchRelationships', this.followers)
      } catch (err) {
        this.$message({
          message: this.$t('message.unfollow_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
-    },
-  },
+    }
+  }
 }
 </script>

--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Follows.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Follows.vue
@ -1,19 +1,8 @@
 <template>
  <div id="follows">
-    <DynamicScroller
-      :items="follows"
-      :min-item-size="53"
-      class="scroller"
-      page-mode
-    >
+    <DynamicScroller :items="follows" :min-item-size="53" class="scroller" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.item]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.item]" :data-index="index" :watchData="true">
          <user
            :user="item"
            v-bind:key="item.id"
@ -25,11 +14,7 @@
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
-    <div
-      class="loading-card"
-      v-loading="lazyLoading"
-      :element-loading-background="backgroundColor"
-    ></div>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
  </div>
 </template>

@ -43,142 +28,93 @@ export default {
  components: { User },
  computed: {
    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Follows', {
-      follows: (state) => state.follows,
-      relationships: (state) => state.relationships,
-      lazyLoading: (state) => state.lazyLoading,
+      follows: state => state.follows,
+      relationships: state => state.relationships,
+      lazyLoading: state => state.lazyLoading
    }),
    ...mapState('App', {
-      backgroundColor: (state) => state.theme.background_color,
-    }),
+      backgroundColor: state => state.theme.background_color
+    })
  },
  created() {
    this.load()
  },
  mounted() {
-    document
-      .getElementById('sidebar_scrollable')
-      .addEventListener('scroll', this.onScroll)
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
  },
-  destroyed() {
-    if (
-      document.getElementById('sidebar_scrollable') !== undefined &&
-      document.getElementById('sidebar_scrollable') !== null
-    ) {
-      document
-        .getElementById('sidebar_scrollable')
-        .removeEventListener('scroll', this.onScroll)
+  unmounted() {
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
    }
  },
  watch: {
    account: function (_newAccount, _oldAccount) {
      this.load()
-    },
+    }
  },
  methods: {
    async load() {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        const follows = await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows',
-          this.account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships',
-          follows
-        )
+        const follows = await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', this.account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', follows)
      } catch (err) {
        console.error(err)
        this.$message({
          message: this.$t('message.follows_fetch_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
    },
    onScroll(event) {
      // for lazyLoading
      if (
-        event.target.clientHeight + event.target.scrollTop >=
-          document.getElementById('account_profile').clientHeight - 10 &&
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
        !this.lazyloading
      ) {
-        this.$store
-          .dispatch(
-            'TimelineSpace/Contents/SideBar/AccountProfile/Follows/lazyFetchFollows',
-            this.account
-          )
-          .catch((err) => {
-            console.error(err)
-            this.$message({
-              message: this.$t('message.timeline_fetch_error'),
-              type: 'error',
-            })
+        this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/lazyFetchFollows', this.account).catch(err => {
+          console.error(err)
+          this.$message({
+            message: this.$t('message.timeline_fetch_error'),
+            type: 'error'
          })
+        })
      }
    },
    targetRelation(id) {
-      return this.relationships.find((r) => r.id === id)
+      return this.relationships.find(r => r.id === id)
    },
    async followAccount(account) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/follow',
-          account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships',
-          this.follows
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/follow', account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
      } catch (err) {
        this.$message({
          message: this.$t('message.follow_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
    },
    async unfollowAccount(account) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-        true
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true)
      try {
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/unfollow',
-          account
-        )
-        await this.$store.dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships',
-          this.follows
-        )
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/unfollow', account)
+        await this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchRelationships', this.follows)
      } catch (err) {
        this.$message({
          message: this.$t('message.unfollow_error'),
-          type: 'error',
+          type: 'error'
        })
      } finally {
-        this.$store.commit(
-          'TimelineSpace/Contents/SideBar/AccountProfile/changeLoading',
-          false
-        )
+        this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false)
      }
-    },
-  },
+    }
+  }
 }
 </script>

--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media.vue
@ -1,20 +1,8 @@
 <template>
  <div id="timeline">
-    <DynamicScroller
-      :items="timeline"
-      :min-item-size="60"
-      class="scroller"
-      :buffer="buffer"
-      page-mode
-    >
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.uri]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
          <toot
            :message="item"
            :key="item.id"
@ -32,11 +20,7 @@
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
-    <div
-      class="loading-card"
-      v-loading="lazyLoading"
-      :element-loading-background="backgroundColor"
-    ></div>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
  </div>
 </template>

@ -51,32 +35,25 @@ export default {
  components: { Toot },
  data() {
    return {
-      focusedId: null,
+      focusedId: null
    }
  },
  computed: {
-    ...mapState(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media',
-      {
-        timeline: (state) => state.timeline,
-        lazyLoading: (state) => state.lazyLoading,
-      }
-    ),
-    ...mapState('App', {
-      backgroundColor: (state) => state.theme.background_color,
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media', {
+      timeline: state => state.timeline,
+      lazyLoading: state => state.lazyLoading
    }),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
  },
  created() {
    this.load()
  },
  mounted() {
-    this.$store.dispatch(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline'
-    )
-    document
-      .getElementById('sidebar_scrollable')
-      .addEventListener('scroll', this.onScroll)
+    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
    Event.$on('focus-sidebar', () => {
      this.focusedId = 0
      this.$nextTick(function () {
@ -84,98 +61,68 @@ export default {
      })
    })
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$emit('focus-timeline')
    Event.$off('focus-sidebar')
  },
-  destroyed() {
-    if (
-      document.getElementById('sidebar_scrollable') !== undefined &&
-      document.getElementById('sidebar_scrollable') !== null
-    ) {
-      document
-        .getElementById('sidebar_scrollable')
-        .removeEventListener('scroll', this.onScroll)
+  unmounted() {
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
    }
  },
  watch: {
    account: function (_newAccount, _oldAccount) {
-      this.$store.dispatch(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline'
-      )
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/clearTimeline')
      this.load()
-    },
+    }
  },
  methods: {
    load() {
-      this.$store
-        .dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/fetchTimeline',
-          this.account
-        )
-        .catch(() => {
-          this.$message({
-            message: this.$t('message.timeline_fetch_error'),
-            type: 'error',
-          })
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/fetchTimeline', this.account).catch(() => {
+        this.$message({
+          message: this.$t('message.timeline_fetch_error'),
+          type: 'error'
        })
+      })
    },
    updateToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/updateToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/updateToot', message)
    },
    deleteToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/deleteToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/deleteToot', message)
    },
    onScroll(event) {
      // for lazyLoading
      if (
-        event.target.clientHeight + event.target.scrollTop >=
-          document.getElementById('account_profile').clientHeight - 10 &&
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
        !this.lazyloading
      ) {
        this.$store
-          .dispatch(
-            'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/lazyFetchTimeline',
-            {
-              account: this.account,
-              status: this.timeline[this.timeline.length - 1],
-            }
-          )
-          .catch((err) => {
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Media/lazyFetchTimeline', {
+            account: this.account,
+            status: this.timeline[this.timeline.length - 1]
+          })
+          .catch(err => {
            console.error(err)
            this.$message({
              message: this.$t('message.timeline_fetch_error'),
-              type: 'error',
+              type: 'error'
            })
          })
      }
    },
    focusNext() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex === -1) {
        this.focusedId = this.timeline[0].uri + this.timeline[0].id
      } else if (currentIndex < this.timeline.length - 1) {
-        this.focusedId =
-          this.timeline[currentIndex + 1].uri +
-          this.timeline[currentIndex + 1].id
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
      }
    },
    focusPrev() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex > 0) {
-        this.focusedId =
-          this.timeline[currentIndex - 1].uri +
-          this.timeline[currentIndex - 1].id
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
      }
    },
    focusToot(message) {
@ -184,8 +131,8 @@ export default {
    focusTimeline() {
      this.focusedId = 0
      Event.$emit('focus-timeline')
-    },
-  },
+    }
+  }
 }
 </script>

--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts.vue
@ -78,11 +78,11 @@ export default {
      })
    })
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$emit('focus-timeline')
    Event.$off('focus-sidebar')
  },
-  destroyed() {
+  unmounted() {
    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
    }
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies.vue
@ -1,20 +1,8 @@
 <template>
  <div id="timeline">
-    <DynamicScroller
-      :items="timeline"
-      :min-item-size="60"
-      class="scroller"
-      :buffer="buffer"
-      page-mode
-    >
+    <DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
      <template v-slot="{ item, index, active }">
-        <DynamicScrollerItem
-          :item="item"
-          :active="active"
-          :size-dependencies="[item.uri]"
-          :data-index="index"
-          :watchData="true"
-        >
+        <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
          <toot
            :message="item"
            :key="item.id"
@ -32,11 +20,7 @@
        </DynamicScrollerItem>
      </template>
    </DynamicScroller>
-    <div
-      class="loading-card"
-      v-loading="lazyLoading"
-      :element-loading-background="backgroundColor"
-    ></div>
+    <div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
  </div>
 </template>

@ -51,32 +35,25 @@ export default {
  components: { Toot },
  data() {
    return {
-      focusedId: null,
+      focusedId: null
    }
  },
  computed: {
-    ...mapState(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies',
-      {
-        timeline: (state) => state.timeline,
-        lazyLoading: (state) => state.lazyLoading,
-      }
-    ),
-    ...mapState('App', {
-      backgroundColor: (state) => state.theme.background_color,
+    ...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies', {
+      timeline: state => state.timeline,
+      lazyLoading: state => state.lazyLoading
    }),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    ...mapState('App', {
+      backgroundColor: state => state.theme.background_color
+    }),
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
  },
  created() {
    this.load()
  },
  mounted() {
-    this.$store.dispatch(
-      'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline'
-    )
-    document
-      .getElementById('sidebar_scrollable')
-      .addEventListener('scroll', this.onScroll)
+    this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
+    document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
    Event.$on('focus-sidebar', () => {
      this.focusedId = 0
      this.$nextTick(function () {
@ -84,98 +61,70 @@ export default {
      })
    })
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$emit('focus-timeline')
    Event.$off('focus-sidebar')
  },
-  destroyed() {
-    if (
-      document.getElementById('sidebar_scrollable') !== undefined &&
-      document.getElementById('sidebar_scrollable') !== null
-    ) {
-      document
-        .getElementById('sidebar_scrollable')
-        .removeEventListener('scroll', this.onScroll)
+  unmounted() {
+    if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
+      document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
    }
  },
  watch: {
    account: function (_newAccount, _oldAccount) {
-      this.$store.dispatch(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline'
-      )
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/clearTimeline')
      this.load()
-    },
+    }
  },
  methods: {
    load() {
      this.$store
-        .dispatch(
-          'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline',
-          this.account
-        )
+        .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/fetchTimeline', this.account)
        .catch(() => {
          this.$message({
            message: this.$t('message.timeline_fetch_error'),
-            type: 'error',
+            type: 'error'
          })
        })
    },
    updateToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/updateToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/updateToot', message)
    },
    deleteToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/deleteToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/deleteToot', message)
    },
    onScroll(event) {
      // for lazyLoading
      if (
-        event.target.clientHeight + event.target.scrollTop >=
-          document.getElementById('account_profile').clientHeight - 10 &&
+        event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
        !this.lazyloading
      ) {
        this.$store
-          .dispatch(
-            'TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/lazyFetchTimeline',
-            {
-              account: this.account,
-              status: this.timeline[this.timeline.length - 1],
-            }
-          )
-          .catch((err) => {
+          .dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/PostsAndReplies/lazyFetchTimeline', {
+            account: this.account,
+            status: this.timeline[this.timeline.length - 1]
+          })
+          .catch(err => {
            console.error(err)
            this.$message({
              message: this.$t('message.timeline_fetch_error'),
-              type: 'error',
+              type: 'error'
            })
          })
      }
    },
    focusNext() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex === -1) {
        this.focusedId = this.timeline[0].uri + this.timeline[0].id
      } else if (currentIndex < this.timeline.length - 1) {
-        this.focusedId =
-          this.timeline[currentIndex + 1].uri +
-          this.timeline[currentIndex + 1].id
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
      }
    },
    focusPrev() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex > 0) {
-        this.focusedId =
-          this.timeline[currentIndex - 1].uri +
-          this.timeline[currentIndex - 1].id
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
      }
    },
    focusToot(message) {
@ -184,8 +133,8 @@ export default {
    focusTimeline() {
      this.focusedId = 0
      Event.$emit('focus-timeline')
-    },
-  },
+    }
+  }
 }
 </script>

--- a/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/TootDetail.vue
@ -1,10 +1,6 @@
 <template>
  <div class="toot-detail" ref="detail">
-    <div
-      class="toot-ancestors"
-      v-for="(message, index) in ancestors"
-      v-bind:key="'ancestors-' + index"
-    >
+    <div class="toot-ancestors" v-for="(message, index) in ancestors" v-bind:key="'ancestors-' + index">
      <toot
        :message="message"
        :focused="message.uri + message.id === focusedId"
@ -35,11 +31,7 @@
      >
      </toot>
    </div>
-    <div
-      class="toot-descendants"
-      v-for="(message, index) in descendants"
-      v-bind:key="'descendants' + index"
-    >
+    <div class="toot-descendants" v-for="(message, index) in descendants" v-bind:key="'descendants' + index">
      <toot
        :message="message"
        :focused="message.uri + message.id === focusedId"
@ -67,19 +59,18 @@ export default {
  components: { Toot },
  data() {
    return {
-      focusedId: null,
+      focusedId: null
    }
  },
  computed: {
    ...mapState('TimelineSpace/Contents/SideBar/TootDetail', {
-      message: (state) => state.message,
-      ancestors: (state) => state.ancestors,
-      descendants: (state) => state.descendants,
-      timeline: (state) =>
-        state.ancestors.concat([state.message]).concat(state.descendants),
+      message: state => state.message,
+      ancestors: state => state.ancestors,
+      descendants: state => state.descendants,
+      timeline: state => state.ancestors.concat([state.message]).concat(state.descendants)
    }),
    ...mapGetters('TimelineSpace/Contents/SideBar/TootDetail', ['filters']),
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    ...mapGetters('TimelineSpace/Modals', ['modalOpened'])
  },
  created() {
    this.load()
@ -95,9 +86,9 @@ export default {
  watch: {
    message: function () {
      this.load()
-    },
+    }
  },
-  beforeDestroy() {
+  beforeUnmount() {
    Event.$emit('focus-timeline')
    Event.$off('focus-sidebar')
  },
@ -111,10 +102,7 @@ export default {
    },
    load() {
      this.$store
-        .dispatch(
-          'TimelineSpace/Contents/SideBar/TootDetail/fetchToot',
-          this.originalMessage(this.message)
-        )
+        .dispatch('TimelineSpace/Contents/SideBar/TootDetail/fetchToot', this.originalMessage(this.message))
        .then(() => {
          const toot = this.$refs.original
          toot.scrollIntoView()
@ -122,66 +110,40 @@ export default {
        .catch(() => {
          this.$message({
            message: this.$t('message.toot_fetch_error'),
-            type: 'error',
+            type: 'error'
          })
        })
    },
    updateAncestorsToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/updateAncestorsToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateAncestorsToot', message)
    },
    deleteAncestorsToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/deleteAncestorsToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteAncestorsToot', message)
    },
    updateToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/updateToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateToot', message)
    },
    deleteToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/deleteToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteToot', message)
    },
    updateDescendantsToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/updateDescendantsToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/updateDescendantsToot', message)
    },
    deleteDescendantsToot(message) {
-      this.$store.commit(
-        'TimelineSpace/Contents/SideBar/TootDetail/deleteDescendantsToot',
-        message
-      )
+      this.$store.commit('TimelineSpace/Contents/SideBar/TootDetail/deleteDescendantsToot', message)
    },
    focusNext() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex === -1) {
        this.focusedId = this.timeline[0].uri + this.timeline[0].id
      } else if (currentIndex < this.timeline.length - 1) {
-        this.focusedId =
-          this.timeline[currentIndex + 1].uri +
-          this.timeline[currentIndex + 1].id
+        this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
      }
    },
    focusPrev() {
-      const currentIndex = this.timeline.findIndex(
-        (toot) => this.focusedId === toot.uri + toot.id
-      )
+      const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
      if (currentIndex > 0) {
-        this.focusedId =
-          this.timeline[currentIndex - 1].uri +
-          this.timeline[currentIndex - 1].id
+        this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
      }
    },
    focusToot(message) {
@ -190,8 +152,8 @@ export default {
    focusTimeline() {
      this.focusedId = 0
      Event.$emit('focus-timeline')
-    },
-  },
+    }
+  }
 }
 </script>

--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@ -11,14 +11,14 @@
      <el-button v-show="reloadable()" type="text" class="action" @click="reload" :title="$t('header_menu.reload')">
        <font-awesome-icon icon="rotate" />
      </el-button>
-      <el-popover placement="left-start" width="180" popper-class="theme-popover" trigger="click" v-model="TLOptionVisible">
+      <el-popover placement="left-start" width="180" popper-class="theme-popover" trigger="click" v-model:visible="TLOptionVisible">
        <div>
          <el-form role="form" label-position="left" label-width="125px" size="default">
            <el-form-item for="show-reblogs" :label="$t('header_menu.option.show_reblogs')">
-              <el-checkbox id="show-reblogs" v-model="showReblogs"></el-checkbox>
+              <el-checkbox id="show-reblogs" :model-value="showReblogs"></el-checkbox>
            </el-form-item>
            <el-form-item for="show-replies" :label="$t('header_menu.option.show_replies')">
-              <el-checkbox id="show-replies" v-model="showReplies"></el-checkbox>
+              <el-checkbox id="show-replies" :model-value="showReplies"></el-checkbox>
            </el-form-item>
            <el-button type="primary" @click="applyTLOption">{{ $t('header_menu.option.apply') }}</el-button>
          </el-form>
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.add_list_member.title')" v-model="addListMemberModal" width="400px" class="add-member">
+  <el-dialog :title="$t('modals.add_list_member.title')" :model-value="addListMemberModal" width="400px" class="add-member">
    <div class="search-account" :element-loading-background="loadingBackground">
      <el-form :inline="true">
        <input v-model="name" placeholder="Account name" class="account-name" autofocus />
--- a/src/renderer/components/TimelineSpace/Modals/Jump.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Jump.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="jumpModal" width="440px" class="jump-modal">
+  <el-dialog :model-value="jumpModal" width="440px" class="jump-modal">
    <el-form class="jump-form" v-on:submit.prevent="jump">
      <div class="channel">
        <input type="text" v-model="channel" :placeholder="$t('modals.jump.jump_to')" ref="channel" />
--- a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.list_membership.title')" v-model="listMembershipModal" width="400px" class="list-membership-modal">
+  <el-dialog :title="$t('modals.list_membership.title')" :model-value="listMembershipModal" width="400px" class="list-membership-modal">
    <el-checkbox-group v-model="belongToLists" v-loading="loading">
      <table class="lists">
        <tbody>
--- a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
+++ b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.mute_confirm.title')" v-model="muteConfirmModal" width="400px" custom-class="mute-confirm">
+  <el-dialog :title="$t('modals.mute_confirm.title')" :model-value="muteConfirmModal" width="400px" custom-class="mute-confirm">
    <el-form class="description">
      <el-form-item for="notify" :label="$t('modals.mute_confirm.body')">
        <el-switch id="notify" v-model="notify"></el-switch>
--- a/src/renderer/components/TimelineSpace/Modals/NewToot.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@ -1,7 +1,7 @@
 <template>
  <el-dialog
    :title="$t('modals.new_toot.title')"
-    v-model="newTootModal"
+    :model-value="newTootModal"
    v-if="newTootModal"
    :before-close="closeConfirm"
    width="600px"
@ -69,24 +69,26 @@
          <el-button size="default" type="text" :title="$t('modals.new_toot.footer.change_visibility')">
            <font-awesome-icon :icon="visibilityIcon" />
          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="visibilityList.Public.value">
-              <font-awesome-icon icon="globe" class="privacy-icon" />
-              {{ $t(visibilityList.Public.name) }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="visibilityList.Unlisted.value">
-              <font-awesome-icon icon="unlock" class="privacy-icon" />
-              {{ $t(visibilityList.Unlisted.name) }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="visibilityList.Private.value">
-              <font-awesome-icon icon="lock" class="privacy-icon" />
-              {{ $t(visibilityList.Private.name) }}
-            </el-dropdown-item>
-            <el-dropdown-item :command="visibilityList.Direct.value">
-              <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
-              {{ $t(visibilityList.Direct.name) }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="visibilityList.Public.value">
+                <font-awesome-icon icon="globe" class="privacy-icon" />
+                {{ $t(visibilityList.Public.name) }}
+              </el-dropdown-item>
+              <el-dropdown-item :command="visibilityList.Unlisted.value">
+                <font-awesome-icon icon="unlock" class="privacy-icon" />
+                {{ $t(visibilityList.Unlisted.name) }}
+              </el-dropdown-item>
+              <el-dropdown-item :command="visibilityList.Private.value">
+                <font-awesome-icon icon="lock" class="privacy-icon" />
+                {{ $t(visibilityList.Private.name) }}
+              </el-dropdown-item>
+              <el-dropdown-item :command="visibilityList.Direct.value">
+                <font-awesome-icon icon="envelope" class="privacy-icon" size="sm" />
+                {{ $t(visibilityList.Direct.name) }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
        </el-dropdown>
      </div>
      <div class="sensitive" v-show="attachedMedias.length > 0">
--- a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
+++ b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@ -32,29 +32,40 @@
        </li>
      </ul>
    </el-popover>
-    <div v-click-outside="hideEmojiPicker">
-      <el-button type="text" class="emoji-selector" @click="toggleEmojiPicker">
-        <font-awesome-icon :icon="['far', 'face-smile']" size="lg" />
-      </el-button>
-      <div v-if="openEmojiPicker" class="emoji-picker">
-        <picker set="emojione" :autoFocus="true" :custom="pickerEmojis" @select="selectEmoji" />
-      </div>
+    <div>
+      <el-popover placement="bottom" width="281" trigger="click" popper-class="status-emoji-picker" ref="status_emoji_picker">
+        <picker
+          :data="emojiIndex"
+          set="twitter"
+          :autoFocus="true"
+          @select="selectEmoji"
+          :custom="pickerEmojis"
+          :perLine="7"
+          :emojiSize="24"
+          :showPreview="false"
+          :emojiTooltip="true"
+        />
+        <template #reference>
+          <el-button class="emoji-selector" type="text">
+            <font-awesome-icon :icon="['far', 'face-smile']" size="lg" />
+          </el-button>
+        </template>
+      </el-popover>
    </div>
  </div>
 </template>

 <script>
 import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import data from 'emoji-mart-vue-fast/data/all.json'
 import { mapState, mapGetters } from 'vuex'
-import { Picker } from 'emoji-mart-vue-fast/src'
-import ClickOutside from 'vue-click-outside'
+import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
 import suggestText from '@/utils/suggestText'

+const emojiIndex = new EmojiIndex(data)
+
 export default {
  name: 'status',
-  directives: {
-    ClickOutside
-  },
  components: {
    Picker
  },
@ -78,7 +89,8 @@ export default {
  data() {
    return {
      highlightedIndex: 0,
-      openEmojiPicker: false
+      openEmojiPicker: false,
+      emojiIndex: emojiIndex
    }
  },
  computed: {
@ -119,7 +131,6 @@ export default {
        })
      } else if (oldState && !newState) {
        this.closeSuggest()
-        this.hideEmojiPicker()
      }
    }
  },
@ -251,12 +262,6 @@ export default {
      this.openEmojiPicker = !this.openEmojiPicker
      this.$emit('pickerOpened', this.openEmojiPicker)
    },
-    hideEmojiPicker() {
-      if (this.openEmojiPicker) {
-        this.$emit('pickerOpened', false)
-      }
-      this.openEmojiPicker = false
-    },
    selectEmoji(emoji) {
      const current = this.$refs.status.selectionStart
      if (emoji.native) {
--- a/src/renderer/components/TimelineSpace/Modals/Report.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Report.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.report.title')" v-model="reportModal" width="400px" custom-class="report">
+  <el-dialog :title="$t('modals.report.title')" :model-value="reportModal" width="400px" custom-class="report">
    <el-input type="textarea" v-model="comment" :placeholder="$t('modals.report.comment')"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeModal">{{ $t('modals.report.cancel') }}</el-button>
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="$t('modals.shortcut.title')" v-model="shortcutModal" width="500px" class="shortcut-modal">
+  <el-dialog :title="$t('modals.shortcut.title')" :model-value="shortcutModal" width="500px" class="shortcut-modal">
    <table class="shortcuts">
      <tbody>
        <tr>
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@ -225,7 +225,6 @@ import data from 'emoji-mart-vue-fast/data/all.json'
 import moment from 'moment'
 import { mapState } from 'vuex'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
-import ClickOutside from 'vue-click-outside'
 import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
 import DisplayStyle from '~/src/constants/displayStyle'
 import TimeFormat from '~/src/constants/timeFormat'
@ -242,9 +241,6 @@ const emojiIndex = new EmojiIndex(data)

 export default {
  name: 'toot',
-  directives: {
-    ClickOutside
-  },
  components: {
    FailoverImg,
    Poll,
--- a/yarn.lock
+++ b/yarn.lock
@ -12275,11 +12275,6 @@ verror@1.10.0, verror@^1.10.0:
    core-util-is "1.0.2"
    extsprintf "^1.2.0"

-vue-click-outside@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vue-click-outside/-/vue-click-outside-1.1.0.tgz#48b7680b518923e701643cccb3e165854aad99eb"
-  integrity sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ==
-
 vue-demi@*:
  version "0.12.5"
  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"