From ef3cadd4d358760b231f664b60f9bf1ff8f7d285 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Tue, 7 Apr 2020 00:47:16 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Props=E3=81=AE=E5=9E=8B=E5=AE=9A=E7=BE=A9?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AuthenticateButtonPrimary.vue             | 10 ++---
 .../AuthenticateButtonSecondary.vue           | 18 +++-----
 .../Authenticate/AuthenticateHeader.vue       | 12 ++----
 .../Authenticate/AuthenticateInput.vue        | 28 +++++++------
 .../Authenticate/AuthenticateMainView.vue     | 22 ++++------
 .../Authenticate/AuthenticateSeparator.vue    | 10 ++---
 src/components/Authenticate/use/login.ts      |  2 +-
 .../MainView/MainViewComponentSelector.vue    | 19 +++++----
 .../MainViewHeader/MainViewHeader.vue         | 19 ++++++---
 .../MainViewHeaderChannelName.vue             | 19 +++++++--
 .../MainViewHeader/MainViewHeaderTools.vue    | 12 ++----
 .../MainView/MessageElement/GradeBadge.vue    | 20 ++++-----
 .../MessageElement/MessageElement.vue         | 12 +++---
 .../MessageElement/MessageFileList.vue        |  6 +--
 .../MessageElement/MessageFileListFile.vue    | 14 ++-----
 .../MessageElement/MessageFileListImage.vue   |  8 ++--
 .../MessageElement/MessageFileListVideo.vue   | 11 ++---
 .../MainView/MessageElement/MessageHeader.vue | 21 +++++-----
 .../MainView/MessageInput/MessageInput.vue    | 10 ++---
 .../MessageInput/MessageInputControls.vue     |  3 +-
 .../MessageInput/MessageInputFileListItem.vue | 14 +++----
 .../MessageInputFileListItemImage.vue         | 17 ++++----
 .../MessageInput/MessageInputTextArea.vue     | 10 +----
 .../Main/MainView/MessagesScroller.vue        | 14 +++----
 src/components/Main/MainView/MessagesView.vue |  7 +---
 .../Modal/SettingModal/NavigationContent.vue  | 36 ++++++++--------
 .../SettingModal/NavigationContentTitle.vue   | 12 ++----
 .../Modal/SettingModal/NavigationSelector.vue | 19 +++++----
 .../SettingModal/NavigationSelectorItem.vue   | 17 +++-----
 .../Main/Modal/UserModal/Feature/Buttons.vue  | 12 ++----
 .../UserModal/Feature/DesktopFeature.vue      | 19 +++------
 .../Main/Modal/UserModal/Feature/Feature.vue  | 21 +++++-----
 .../Modal/UserModal/Feature/LinkButton.vue    | 19 +++------
 .../Modal/UserModal/Feature/MobileFeature.vue | 20 ++++-----
 .../UserModal/Feature/OnlineIndicator.vue     | 21 +++++-----
 .../Main/Modal/UserModal/GroupsTab.vue        | 18 ++++----
 .../Modal/UserModal/NavigationContent.vue     | 25 ++++-------
 .../Modal/UserModal/NavigationSelector.vue    | 20 ++++-----
 .../UserModal/NavigationSelectorItem.vue      | 11 +----
 .../Modal/UserModal/ProfileTab/Accounts.vue   | 15 ++-----
 .../Main/Modal/UserModal/ProfileTab/Bio.vue   |  9 +---
 .../UserModal/ProfileTab/HomeChannel.vue      |  9 +---
 .../UserModal/ProfileTab/ProfileHeader.vue    | 11 ++---
 .../Modal/UserModal/ProfileTab/ProfileTab.vue | 25 ++++++-----
 .../Main/Modal/UserModal/TagsTab.vue          | 31 +++++++++-----
 .../Main/Modal/UserModal/TagsTabAdd.vue       | 10 ++---
 .../Main/Modal/UserModal/UserModal.vue        | 11 ++---
 .../Navigation/ChannelList/ChannelElement.vue | 36 ++++++----------
 .../ChannelList/ChannelElementHash.vue        | 41 +++++++------------
 .../Navigation/ChannelList/ChannelList.vue    | 17 +++-----
 .../Navigation/DesktopNavigationSelector.vue  | 20 ++++-----
 .../Main/Navigation/NavigationContent.vue     | 34 ++++++++-------
 .../Navigation/NavigationContent/Activity.vue |  4 +-
 .../NavigationContent/ActivityElement.vue     | 15 +++----
 .../ActivityElementContent.vue                |  9 ++--
 .../ActivityElementUserName.vue               | 13 +++---
 .../Navigation/NavigationContent/Channels.vue |  4 +-
 .../Navigation/NavigationContent/Home.vue     |  4 +-
 .../NavigationContent/NotImplemented.vue      |  4 +-
 .../NavigationContent/UsersElement.vue        | 13 +++---
 .../UsersElementUserName.vue                  | 17 +++-----
 .../NavigationContent/UsersSeparator.vue      |  7 +---
 .../Navigation/NavigationContentContainer.vue | 12 ++----
 .../Navigation/NavigationContentTitle.vue     | 12 ++----
 .../Navigation/NavigationSelectorItem.vue     | 18 ++------
 .../StampPicker/StampPickerEffectSelector.vue | 10 ++---
 .../StampPickerEffectToggleButton.vue         | 10 ++---
 .../Main/StampPicker/StampPickerStampList.vue | 14 +++----
 .../StampPicker/StampPickerStampListItem.vue  | 19 +++++----
 .../StampPickerStampSetSelector.vue           | 22 ++++------
 .../StampPickerStampSetSelectorItem.vue       | 27 +++++-------
 src/components/UI/CircleIcon.vue              | 21 +++-------
 src/components/UI/EmptyState.vue              |  4 +-
 src/components/UI/FilterInput.vue             | 18 +++-----
 src/components/UI/Icon.vue                    | 28 +++++--------
 src/components/UI/NotificationIndiator.vue    | 14 +------
 src/components/UI/Stamp.vue                   | 15 +++----
 src/components/UI/UserIcon.vue                | 14 +++----
 src/components/UI/VirtualScroller.vue         | 30 +++++++-------
 src/views/Auth.vue                            | 21 +++++-----
 src/views/NotFound.vue                        | 22 +++-------
 81 files changed, 511 insertions(+), 787 deletions(-)

diff --git a/src/components/Authenticate/AuthenticateButtonPrimary.vue b/src/components/Authenticate/AuthenticateButtonPrimary.vue
index bd3899bf5..b21adbe7a 100644
--- a/src/components/Authenticate/AuthenticateButtonPrimary.vue
+++ b/src/components/Authenticate/AuthenticateButtonPrimary.vue
@@ -4,7 +4,7 @@
     :style="styles.container"
     @click="context.emit('click')"
   >
-    {{ props.label }}
+    {{ label }}
   </button>
 </template>
 
@@ -12,10 +12,6 @@
 import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  label: string
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -32,9 +28,9 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, context, styles }
+    return { context, styles }
   }
 })
 </script>
diff --git a/src/components/Authenticate/AuthenticateButtonSecondary.vue b/src/components/Authenticate/AuthenticateButtonSecondary.vue
index ff2eebc83..e75a1db9f 100644
--- a/src/components/Authenticate/AuthenticateButtonSecondary.vue
+++ b/src/components/Authenticate/AuthenticateButtonSecondary.vue
@@ -5,12 +5,12 @@
     @click="context.emit('click')"
   >
     <icon
-      v-if="props.iconName"
+      v-if="iconName"
       :class="$style.icon"
-      :name="props.iconName"
-      :mdi="props.iconMdi"
+      :name="iconName"
+      :mdi="iconMdi"
     />
-    {{ props.label }}
+    {{ label }}
   </button>
 </template>
 
@@ -19,12 +19,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 
-type Props = {
-  label: string
-  iconName?: string
-  iconMdi: boolean
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -43,9 +37,9 @@ export default defineComponent({
     iconName: String,
     iconMdi: { type: Boolean, default: false }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, context, styles }
+    return { context, styles }
   }
 })
 </script>
diff --git a/src/components/Authenticate/AuthenticateHeader.vue b/src/components/Authenticate/AuthenticateHeader.vue
index 58b3f43b6..a4ed56158 100644
--- a/src/components/Authenticate/AuthenticateHeader.vue
+++ b/src/components/Authenticate/AuthenticateHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <span v-if="props.title" :class="$style.logoWithTitle">
+    <span v-if="title" :class="$style.logoWithTitle">
       <img src="/img/traq-logo.svg" :class="$style.logo" />
-      <span :class="$style.title">{{ props.title }}</span>
+      <span :class="$style.title">{{ title }}</span>
     </span>
     <img v-else src="/img/traq-logo-full.svg" :class="$style.fullLogo" />
   </div>
@@ -13,10 +13,6 @@ import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
 import useInput from '@/use/input'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  title?: string
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -35,9 +31,9 @@ export default defineComponent({
   props: {
     title: String
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
-    return { props, styles }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Authenticate/AuthenticateInput.vue b/src/components/Authenticate/AuthenticateInput.vue
index 2b15bc411..139c47dcd 100644
--- a/src/components/Authenticate/AuthenticateInput.vue
+++ b/src/components/Authenticate/AuthenticateInput.vue
@@ -1,31 +1,30 @@
 <template>
   <div>
     <label :for="id" :class="$style.title" :style="styles.title">{{
-      props.label
+      label
     }}</label>
     <input
       :class="$style.input"
       :id="id"
       :style="styles.input"
-      :value="props.text"
-      :type="props.type"
+      :value="text"
+      :type="type"
       @input="onInput"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  SetupContext,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import useInput from '@/use/input'
 import { makeStyles } from '@/lib/styles'
 import { randomString } from '@/lib/util/randomString'
 
-type Props = {
-  text: string
-  label: string
-  type: 'text' | 'password'
-}
-
 const useStyles = () =>
   reactive({
     title: makeStyles(theme => ({
@@ -42,13 +41,16 @@ export default defineComponent({
   props: {
     text: { type: String, default: '' },
     label: { type: String, default: '' },
-    type: { type: String, default: 'text' }
+    type: {
+      type: String as PropType<'text' | 'password'>,
+      default: 'text' as const
+    }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const { onInput } = useInput(context)
     const styles = useStyles()
     const id = randomString()
-    return { props, styles, onInput, id }
+    return { styles, onInput, id }
   }
 })
 </script>
diff --git a/src/components/Authenticate/AuthenticateMainView.vue b/src/components/Authenticate/AuthenticateMainView.vue
index 395ee21b2..a0deb5bc3 100644
--- a/src/components/Authenticate/AuthenticateMainView.vue
+++ b/src/components/Authenticate/AuthenticateMainView.vue
@@ -1,14 +1,14 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <authenticate-modal>
-      <login-form v-if="props.type === 'login'" />
-      <registration-form v-if="props.type === 'registration'" />
+      <login-form v-if="type === 'login'" />
+      <registration-form v-if="type === 'registration'" />
     </authenticate-modal>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import AuthenticateModal from './AuthenticateModal.vue'
 import LoginForm from './LoginForm.vue'
@@ -21,10 +21,6 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  type: 'login' | 'password-reset' | 'registration'
-}
-
 export default defineComponent({
   name: 'AuthenticateMainView',
   components: {
@@ -34,17 +30,13 @@ export default defineComponent({
   },
   props: {
     type: {
-      type: String,
-      default: 'login'
+      type: String as PropType<'login' | 'password-reset' | 'registration'>,
+      default: 'login' as const
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-
-    return {
-      props,
-      styles
-    }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Authenticate/AuthenticateSeparator.vue b/src/components/Authenticate/AuthenticateSeparator.vue
index 4abffb923..546801bee 100644
--- a/src/components/Authenticate/AuthenticateSeparator.vue
+++ b/src/components/Authenticate/AuthenticateSeparator.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <span :class="$style.hr" :style="styles.hr"></span>
     <span :class="$style.label" :style="styles.label">
-      {{ props.label }}
+      {{ label }}
     </span>
     <span :class="$style.hr" :style="styles.hr"></span>
   </div>
@@ -12,10 +12,6 @@
 import { defineComponent, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  label: string
-}
-
 const useStyles = () =>
   reactive({
     hr: makeStyles(theme => ({
@@ -34,9 +30,9 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-    return { props, styles }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Authenticate/use/login.ts b/src/components/Authenticate/use/login.ts
index 04dd8339d..ef02219c1 100644
--- a/src/components/Authenticate/use/login.ts
+++ b/src/components/Authenticate/use/login.ts
@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import { reactive } from '@vue/composition-api'
 import api from '@/lib/api'
 
 const useLogin = () => {
diff --git a/src/components/Main/MainView/MainViewComponentSelector.vue b/src/components/Main/MainView/MainViewComponentSelector.vue
index 3663004a6..3ae58e60c 100644
--- a/src/components/Main/MainView/MainViewComponentSelector.vue
+++ b/src/components/Main/MainView/MainViewComponentSelector.vue
@@ -8,31 +8,32 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import { LayoutType, ViewInformation } from '@/store/ui/mainView/state'
-import { VNode } from 'vue'
 
 import MessagesView from '@/components/Main/MainView/MessagesView.vue'
 import QallView from '@/components/Main/MainView/QallView.vue'
 
-type Props = {
-  viewInfo?: ViewInformation
-}
-
 export default defineComponent({
   name: 'MainViewComponentSelector',
   components: { MessagesView, QallView },
   props: {
-    viewInfo: Object
+    viewInfo: Object as PropType<ViewInformation>
   },
-  setup(props: Props) {
+  setup(props) {
     const channelId = computed(
       () => store.state.domain.messagesView.currentChannelId
     )
 
     return {
-      props,
+      // TODO: https://github.com/vuejs/composition-api/issues/291
+      props: props as { viewInfo: ViewInformation | undefined },
       channelId
     }
   }
diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue
index c01f21d7f..670485b0e 100644
--- a/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue
+++ b/src/components/Main/MainView/MainViewHeader/MainViewHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header :class="$style.container" :style="styles.container">
     <h2>
-      <main-view-header-channel-name :channel-id="props.channelId" />
+      <main-view-header-channel-name :channel-id="channelId" />
     </h2>
     <main-view-header-tools
       :class="$style.tools"
@@ -14,7 +14,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { ChannelId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
@@ -69,14 +74,18 @@ export default defineComponent({
     MainViewHeaderChannelName,
     MainViewHeaderTools
   },
-  props: { channelId: String },
-  setup(props: Props) {
+  props: {
+    channelId: {
+      type: String as PropType<ChannelId>,
+      required: true
+    }
+  },
+  setup(props) {
     const { channelState } = useChannelState(props)
     const { starChannel, unstarChannel } = useStarChannel(props)
     const { openNotificationModal } = useNotificationModal(props)
     const styles = useStyles()
     return {
-      props,
       channelState,
       styles,
       starChannel,
diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue
index 7f30cb0fe..5c75e94f1 100644
--- a/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue
+++ b/src/components/Main/MainView/MainViewHeader/MainViewHeaderChannelName.vue
@@ -24,7 +24,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive, Ref } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  Ref,
+  PropType
+} from '@vue/composition-api'
 import { ChannelId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
@@ -72,8 +78,13 @@ const useStyles = (pathInfoList: Ref<readonly ChannelPathInfo[]>) =>
 
 export default defineComponent({
   name: 'MainViewHeaderChannelName',
-  props: { channelId: String },
-  setup(props: Props) {
+  props: {
+    channelId: {
+      type: String as PropType<ChannelId>,
+      required: true
+    }
+  },
+  setup(props) {
     const state = reactive({
       channels: computed(() => store.state.entities.channels)
     })
@@ -86,7 +97,7 @@ export default defineComponent({
     )
     const buildChannelLink = (path: string[]) => `/channels/${path.join('/')}`
     const styles = useStyles(pathInfoList)
-    return { props, state, styles, ancestorsPath, pathInfo, buildChannelLink }
+    return { state, styles, ancestorsPath, pathInfo, buildChannelLink }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue b/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
index f6bde5480..142505bde 100644
--- a/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
+++ b/src/components/Main/MainView/MainViewHeader/MainViewHeaderTools.vue
@@ -20,13 +20,13 @@
     />
     <!-- 遅延ロードをする都合上v-showで切り替える必要がある -->
     <icon
-      v-show="props.isStared"
+      v-show="isStared"
       @click="context.emit('unstar-channel')"
       :class="$style.icon"
       name="star"
     />
     <icon
-      v-show="!props.isStared"
+      v-show="!isStared"
       @click="context.emit('star-channel')"
       :class="$style.icon"
       name="star-outline"
@@ -53,10 +53,6 @@ import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 import MainViewHeaderChannelName from './MainViewHeaderChannelName.vue'
 
-type Props = {
-  isStared: boolean
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -72,8 +68,8 @@ export default defineComponent({
     Icon
   },
   props: { isStared: { type: Boolean, default: false } },
-  setup(props: Props, context: SetupContext) {
-    return { props, context }
+  setup(_, context: SetupContext) {
+    return { context }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageElement/GradeBadge.vue b/src/components/Main/MainView/MessageElement/GradeBadge.vue
index 830556a27..939c3ac1c 100644
--- a/src/components/Main/MainView/MessageElement/GradeBadge.vue
+++ b/src/components/Main/MainView/MessageElement/GradeBadge.vue
@@ -1,27 +1,27 @@
 <template>
   <div :class="$style.body" :style="styles.body">
-    <span v-if="props.isBot">Bot</span>
+    <span v-if="isBot">Bot</span>
     <span v-else-if="state.grade">{{ state.grade }}</span>
     <span v-else>Admin</span>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import { UserId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '../../../../lib/styles'
 
-interface Props {
-  userId: UserId
-  isBot: boolean
-}
-
 export default defineComponent({
   name: 'GradeBadge',
   props: {
     userId: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     },
     isBot: {
@@ -29,7 +29,7 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const state = reactive({
       grade: computed(() =>
         store.getters.entities.gradeNameByUserId(props.userId)
@@ -43,7 +43,7 @@ export default defineComponent({
         }
       })
     })
-    return { props, state, styles }
+    return { state, styles }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index 5bb262458..e7145ea4d 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -31,27 +31,25 @@ import {
   onMounted,
   watchEffect,
   watch,
-  SetupContext
+  SetupContext,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import UserIcon from '@/components/UI/UserIcon.vue'
 import MessageHeader from './MessageHeader.vue'
 import MessageFileList from './MessageFileList.vue'
-
-interface Props {
-  messageId: string
-}
+import { MessageId } from '@/types/entity-ids'
 
 export default defineComponent({
   name: 'MessageElement',
   components: { UserIcon, MessageHeader, MessageFileList },
   props: {
     messageId: {
-      type: String,
+      type: String as PropType<MessageId>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const bodyRef = ref<HTMLDivElement>(null)
     const state = reactive({
       message: computed(() => store.state.entities.messages[props.messageId]),
diff --git a/src/components/Main/MainView/MessageElement/MessageFileList.vue b/src/components/Main/MainView/MessageElement/MessageFileList.vue
index 289e03624..ab0092d5e 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileList.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileList.vue
@@ -32,10 +32,6 @@ import MessageFileListFile from './MessageFileListFile.vue'
 import MessageFileListImage from './MessageFileListImage.vue'
 import MessageFileListVideo from './MessageFileListVideo.vue'
 
-interface Props {
-  fileIds: FileId[]
-}
-
 export default defineComponent({
   name: 'MessageFileList',
   components: {
@@ -49,7 +45,7 @@ export default defineComponent({
       default: []
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const { fileMetaDataState } = useFileMetaList(props)
     const showLargeImage = computed(() => fileMetaDataState.images.length === 1)
     return { fileMetaDataState, mimeToFileType, showLargeImage }
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
index a545d4a1d..0f94802a2 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
@@ -1,17 +1,11 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <message-file-list-item-content :fileId="$props.fileId" />
+    <message-file-list-item-content :fileId="fileId" />
   </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  PropType,
-  computed,
-  reactive,
-  onBeforeMount
-} from '@vue/composition-api'
+import { defineComponent, PropType, reactive } from '@vue/composition-api'
 import { FileId } from '@/types/entity-ids'
 import { AttachmentType } from '@/lib/util/file'
 import { makeStyles } from '@/lib/styles'
@@ -31,11 +25,11 @@ export default defineComponent({
   components: { MessageFileListItemContent },
   props: {
     fileId: {
-      type: String,
+      type: String as PropType<FileId>,
       default: ''
     }
   },
-  setup(props, context) {
+  setup(props) {
     const styles = useStyles()
     return { styles }
   }
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListImage.vue b/src/components/Main/MainView/MessageElement/MessageFileListImage.vue
index 1c2a22204..47a603273 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListImage.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListImage.vue
@@ -1,11 +1,11 @@
 <template>
   <router-link
     :to="fileLink"
-    v-if="$props.isLarge"
+    v-if="isLarge"
     :class="$style.largeContainer"
     :style="styles.container"
   >
-    <img draggable="false" :alt="$props.fileName" :src="imagePath" />
+    <img draggable="false" :alt="fileMeta.name" :src="imagePath" />
   </router-link>
   <router-link
     v-else
@@ -13,7 +13,7 @@
     :class="$style.container"
     :style="styles.container"
   >
-    <img draggable="false" :alt="$props.fileName" :src="imagePath" />
+    <img draggable="false" :alt="fileMeta.name" :src="imagePath" />
   </router-link>
 </template>
 
@@ -56,7 +56,7 @@ export default defineComponent({
     const imagePath = computed(() =>
       props.isLarge ? buildFilePath(props.fileId) : fileRawPath.value
     )
-    return { imagePath, styles, fileLink }
+    return { imagePath, styles, fileLink, fileMeta }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
index 912420f16..c7e4e2e80 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
@@ -1,14 +1,9 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <div :class="$style.overlay" :style="styles.overlay">
-      <message-file-list-item-content :fileId="$props.fileId" is-white />
+      <message-file-list-item-content :fileId="fileId" is-white />
     </div>
-    <video
-      controls
-      draggable="false"
-      :alt="$props.fileName"
-      :src="fileRawPath"
-    />
+    <video controls draggable="false" :alt="fileMeta.name" :src="fileRawPath" />
   </div>
 </template>
 
@@ -49,7 +44,7 @@ export default defineComponent({
   setup(props, context) {
     const styles = useStyles()
     const { fileMeta, fileLink, fileRawPath } = useFileMeta(props, context)
-    return { styles, fileLink, fileRawPath }
+    return { styles, fileMeta, fileLink, fileRawPath }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageElement/MessageHeader.vue b/src/components/Main/MainView/MessageElement/MessageHeader.vue
index 6b42df546..0b32a2d51 100644
--- a/src/components/Main/MainView/MessageElement/MessageHeader.vue
+++ b/src/components/Main/MainView/MessageElement/MessageHeader.vue
@@ -3,7 +3,7 @@
     <span :class="$style.displayName">{{ state.user.displayName }}</span>
     <grade-badge
       :class="$style.badge"
-      :userId="props.userId"
+      :userId="userId"
       :isBot="state.user.bot"
     />
     <span :class="$style.date" :style="styles.date">{{ state.date }}</span>
@@ -11,24 +11,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import { UserId } from '@/types/entity-ids'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
 import { getDisplayDate } from '@/lib/date'
 import GradeBadge from './GradeBadge.vue'
 
-interface Props {
-  userId: UserId
-  createdAt: string
-  updatedAt: string
-}
-
 export default defineComponent({
   name: 'MessageHeader',
   props: {
     userId: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     },
     createdAt: {
@@ -41,7 +40,7 @@ export default defineComponent({
     }
   },
   components: { GradeBadge },
-  setup(props: Props) {
+  setup(props) {
     const state = reactive({
       user: computed(() => store.state.entities.users[props.userId]),
       date: computed(() => getDisplayDate(props.createdAt, props.updatedAt))
@@ -59,7 +58,7 @@ export default defineComponent({
       })
     })
 
-    return { props, state, styles }
+    return { state, styles }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageInput/MessageInput.vue b/src/components/Main/MainView/MessageInput/MessageInput.vue
index 4e464f4e6..5d9dc5880 100644
--- a/src/components/Main/MainView/MessageInput/MessageInput.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInput.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
 import { ChannelId } from '@/types/entity-ids'
@@ -43,10 +43,6 @@ import MessageInputControls from './MessageInputControls.vue'
 import MessageInputFileList from './MessageInputFileList.vue'
 import MessageInputUploadButton from './MessageInputUploadButton.vue'
 
-export type Props = {
-  channelId: ChannelId
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -64,11 +60,11 @@ export default defineComponent({
   },
   props: {
     channelId: {
-      type: String,
+      type: String as PropType<ChannelId>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles()
     const { textState, onInputText } = useTextInput()
     const { attachmentsState, addAttachment } = useAttachments()
diff --git a/src/components/Main/MainView/MessageInput/MessageInputControls.vue b/src/components/Main/MainView/MessageInput/MessageInputControls.vue
index 057bd6009..50d17dd9d 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputControls.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputControls.vue
@@ -67,14 +67,13 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = useStyles(props)
     const { onClickSendButton, onClickStampButton } = useClickHandlers(
       props,
       context
     )
     return {
-      props,
       styles,
       onClickSendButton,
       onClickStampButton
diff --git a/src/components/Main/MainView/MessageInput/MessageInputFileListItem.vue b/src/components/Main/MainView/MessageInput/MessageInputFileListItem.vue
index 939510b38..612fe0396 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputFileListItem.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputFileListItem.vue
@@ -6,11 +6,11 @@
     />
     <message-input-file-list-item-image
       v-if="state.showThumbnail"
-      :attachment="props.attachment"
+      :attachment="attachment"
     />
     <div v-else :class="$style.fileContainer" :style="styles.fileContainer">
       <icon mdi :name="iconName" />
-      <div :class="$style.fileName">{{ props.attachment.file.name }}</div>
+      <div :class="$style.fileName">{{ attachment.file.name }}</div>
     </div>
   </div>
 </template>
@@ -22,7 +22,8 @@ import {
   computed,
   reactive,
   ref,
-  Ref
+  Ref,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { Attachment } from '@/store/ui/fileInput/state'
@@ -31,7 +32,7 @@ import { makeStyles } from '@/lib/styles'
 import MessageInputFileListItemImage from './MessageInputFileListItemImage.vue'
 import MessageInputFileListItemCloseButton from './MessageInputFileListItemCloseButton.vue'
 
-type Props = {
+interface Props {
   attachment: Attachment
 }
 
@@ -69,11 +70,11 @@ export default defineComponent({
   },
   props: {
     attachment: {
-      type: Object,
+      type: Object as PropType<Attachment>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const state = reactive({
       showThumbnail: computed((): boolean =>
         props.attachment.type === 'image' && props.attachment.thumbnailDataUrl
@@ -86,7 +87,6 @@ export default defineComponent({
     const onClickClose = () => context.emit('item-remove')
     return {
       state,
-      props,
       styles,
       iconName,
       onClickClose
diff --git a/src/components/Main/MainView/MessageInput/MessageInputFileListItemImage.vue b/src/components/Main/MainView/MessageInput/MessageInputFileListItemImage.vue
index b879234d0..9b91c53de 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputFileListItemImage.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputFileListItemImage.vue
@@ -4,7 +4,7 @@
       :ref="thumbnailRef"
       :class="$style.image"
       :src="imageThumbnailState.thumbnailDataUrl"
-      :alt="props.attachment.file.name"
+      :alt="attachment.file.name"
     />
   </div>
 </template>
@@ -16,19 +16,16 @@ import {
   computed,
   reactive,
   ref,
-  Ref
+  Ref,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { Attachment } from '@/store/ui/fileInput/state'
 import Icon from '@/components/UI/Icon.vue'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  attachment: Attachment
-}
-
 const useImageThumbnail = (
-  props: Props,
+  props: { attachment: Attachment },
   thumbnailRef: Ref<HTMLImageElement | null>
 ) => {
   const state = reactive({
@@ -52,15 +49,15 @@ export default defineComponent({
   },
   props: {
     attachment: {
-      type: Object,
+      type: Object as PropType<Attachment>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const thumbnailRef = ref<HTMLImageElement>(null)
     const { imageThumbnailState } = useImageThumbnail(props, thumbnailRef)
     const styles = useStyles()
-    return { thumbnailRef, props, styles, imageThumbnailState }
+    return { thumbnailRef, styles, imageThumbnailState }
   }
 })
 </script>
diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index c71b0ba4c..75198c593 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -3,7 +3,7 @@
     ref="textareaRef"
     :class="$style.container"
     :style="styles.container"
-    :value="props.text"
+    :value="text"
     placeholder="メッセージを送信"
     @input="onInput"
     @keydown="onKeyDown"
@@ -42,11 +42,6 @@ const useEnterWatcher = (context: SetupContext) => {
   return { onKeyDown }
 }
 
-type Props = {
-  text: string
-  shouldUpdateTextAreaSize: boolean
-}
-
 export default defineComponent({
   name: 'MessageInputTextArea',
   props: {
@@ -59,7 +54,7 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
     const { onInput } = useInput(context)
     const { onKeyDown } = useEnterWatcher(context)
@@ -78,7 +73,6 @@ export default defineComponent({
       }
     })
     return {
-      props,
       styles,
       onInput,
       onKeyDown,
diff --git a/src/components/Main/MainView/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller.vue
index bdc9deef1..03d14c4ec 100644
--- a/src/components/Main/MainView/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller.vue
@@ -3,7 +3,7 @@
     <div :class="$style.viewport">
       <message-element
         :class="$style.element"
-        v-for="messageId in props.messageIds"
+        v-for="messageId in messageIds"
         :key="messageId"
         :messageId="messageId"
         @change-height="onChangeHeight"
@@ -20,17 +20,14 @@ import {
   computed,
   SetupContext,
   ref,
-  onMounted
+  onMounted,
+  PropType
 } from '@vue/composition-api'
 import { MessageId } from '@/types/entity-ids'
 import store from '@/store'
 import MessageElement from './MessageElement/MessageElement.vue'
 import { throttle } from 'lodash-es'
 
-interface Props {
-  messageIds: MessageId[]
-}
-
 const LOAD_MORE_THRESHOLD = 10
 
 export default defineComponent({
@@ -40,11 +37,11 @@ export default defineComponent({
   },
   props: {
     messageIds: {
-      type: Array,
+      type: Array as PropType<MessageId[]>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const state = reactive({
       height: 0,
       scrollTop: 0,
@@ -107,7 +104,6 @@ export default defineComponent({
     }
 
     return {
-      props,
       state,
       rootRef,
       handleScroll,
diff --git a/src/components/Main/MainView/MessagesView.vue b/src/components/Main/MainView/MessagesView.vue
index bf100515d..92907b1a3 100644
--- a/src/components/Main/MainView/MessagesView.vue
+++ b/src/components/Main/MainView/MessagesView.vue
@@ -32,9 +32,6 @@ import MessageInput from '@/components/Main/MainView/MessageInput/MessageInput.v
 import MessagesViewFileUploadOverlay from './MessagesViewFileUploadOverlay.vue'
 import { debounce } from 'lodash-es'
 
-type Props = {
-  channelId: ChannelId
-}
 const useFileDragDrop = (dropAreaRef: Ref<HTMLElement | null>) => {
   const state = reactive({
     isDragging: false
@@ -65,9 +62,8 @@ const useFileDragDrop = (dropAreaRef: Ref<HTMLElement | null>) => {
 
 export default defineComponent({
   name: 'MessagesView',
-  props: { channelId: String },
   components: { MessagesScroller, MessageInput, MessagesViewFileUploadOverlay },
-  setup(props: Props, _: SetupContext) {
+  setup() {
     const state = reactive({
       channelMessageIds: computed(
         () => store.state.domain.messagesView.messageIds
@@ -88,7 +84,6 @@ export default defineComponent({
       containerRef
     )
     return {
-      props,
       state,
       fileDragDropState,
       containerStyle,
diff --git a/src/components/Main/Modal/SettingModal/NavigationContent.vue b/src/components/Main/Modal/SettingModal/NavigationContent.vue
index cfed6224c..d87077ecd 100644
--- a/src/components/Main/Modal/SettingModal/NavigationContent.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationContent.vue
@@ -1,16 +1,22 @@
 <template>
   <section :class="$style.container" :style="styles.container">
-    <navigation-content-title :current-navigation="props.currentNavigation" />
-    <profile-tab v-if="props.currentNavigation === 'profile'" />
-    <browser-tab v-else-if="props.currentNavigation === 'browser'" />
-    <qall-tab v-else-if="props.currentNavigation === 'qall'" />
-    <stamp-tab v-else-if="props.currentNavigation === 'stamp'" />
-    <theme-tab v-else-if="props.currentNavigation === 'theme'" />
+    <navigation-content-title :current-navigation="currentNavigation" />
+    <profile-tab v-if="currentNavigation === 'profile'" />
+    <browser-tab v-else-if="currentNavigation === 'browser'" />
+    <qall-tab v-else-if="currentNavigation === 'qall'" />
+    <stamp-tab v-else-if="currentNavigation === 'stamp'" />
+    <theme-tab v-else-if="currentNavigation === 'theme'" />
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  ref,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import apis from '@/lib/api'
@@ -32,10 +38,6 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationContent',
   components: {
@@ -48,17 +50,13 @@ export default defineComponent({
   },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'profile' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'profile' as const
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-
-    return {
-      styles,
-      props
-    }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue b/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
index b1a6f4eaf..fdfebb657 100644
--- a/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationContentTitle.vue
@@ -5,23 +5,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed, PropType } from '@vue/composition-api'
 import { NavigationItemType, navigationTypeNameMap } from './use/navigation'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationContentTitle',
   props: {
     currentNavigation: {
-      type: String,
-      default: 'home' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'profile' as const
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const title = computed(() => navigationTypeNameMap[props.currentNavigation])
     const containerStyle = makeStyles(theme => ({
       color: theme.ui.primary
diff --git a/src/components/Main/Modal/SettingModal/NavigationSelector.vue b/src/components/Main/Modal/SettingModal/NavigationSelector.vue
index ce32a6360..170619e77 100644
--- a/src/components/Main/Modal/SettingModal/NavigationSelector.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationSelector.vue
@@ -7,14 +7,19 @@
       :type="item.type"
       :iconName="item.iconName"
       :iconMdi="item.iconMdi"
-      :is-selected="props.currentNavigation === item.type"
+      :is-selected="currentNavigation === item.type"
       @click="onNavigationItemClick(item.type)"
     />
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  SetupContext,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { NavigationItemType, useNavigationSelectorItem } from './use/navigation'
 import NavigationSelectorItem from './NavigationSelectorItem.vue'
@@ -27,20 +32,16 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationSelector',
   components: { NavigationSelectorItem },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'profile' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'profile' as const
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = useStyles()
     const items: {
       type: NavigationItemType
diff --git a/src/components/Main/Modal/SettingModal/NavigationSelectorItem.vue b/src/components/Main/Modal/SettingModal/NavigationSelectorItem.vue
index ce0d22c2e..105448445 100644
--- a/src/components/Main/Modal/SettingModal/NavigationSelectorItem.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationSelectorItem.vue
@@ -20,13 +20,14 @@ import {
   defineComponent,
   SetupContext,
   reactive,
-  computed
+  computed,
+  PropType
 } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { NavigationItemType, navigationTypeNameMap } from './use/navigation'
 import Icon from '@/components/UI/Icon.vue'
 
-const useStyles = (props: Props, size: number) =>
+const useStyles = (props: { isSelected: boolean }, size: number) =>
   reactive({
     item: makeStyles(theme => ({
       color: props.isSelected ? theme.ui.primary : theme.ui.secondary,
@@ -34,19 +35,12 @@ const useStyles = (props: Props, size: number) =>
     }))
   })
 
-type Props = {
-  type: NavigationItemType
-  iconName: string
-  iconMdi?: boolean
-  isSelected: boolean
-}
-
 export default defineComponent({
   name: 'NavigationSelectorItem',
   components: { Icon },
   props: {
     type: {
-      type: String,
+      type: String as PropType<NavigationItemType>,
       required: true
     },
     iconName: {
@@ -59,13 +53,12 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const size = 24
     const styles = useStyles(props, size)
     const title = computed(() => navigationTypeNameMap[props.type])
     return {
       styles,
-      props,
       size,
       title,
       context
diff --git a/src/components/Main/Modal/UserModal/Feature/Buttons.vue b/src/components/Main/Modal/UserModal/Feature/Buttons.vue
index 9dfdda4da..d738f1af9 100644
--- a/src/components/Main/Modal/UserModal/Feature/Buttons.vue
+++ b/src/components/Main/Modal/UserModal/Feature/Buttons.vue
@@ -2,7 +2,7 @@
   <div>
     <div @click="onDMClick" :style="{ display: 'inline-block' }">
       <link-button
-        :title="`${props.showTitle ? 'DM' : ''}`"
+        :title="`${showTitle ? 'DM' : ''}`"
         iconName="email"
         iconMdi
       />
@@ -13,7 +13,7 @@
       :style="{ display: 'inline-block' }"
     >
       <link-button
-        :title="`${props.showTitle ? 'ホーム' : ''}`"
+        :title="`${showTitle ? 'ホーム' : ''}`"
         iconName="home"
         iconMdi
       />
@@ -28,11 +28,6 @@ import store from '@/store'
 import useHomeChannel from '../use/homeChannel'
 import LinkButton from './LinkButton.vue'
 
-interface Props {
-  username: string
-  showTitle: boolean
-}
-
 export default defineComponent({
   name: 'Buttons',
   props: {
@@ -45,7 +40,7 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const username = computed(() => props.username)
     const onDMClick = () => {
       // TODO: DM対応
@@ -53,7 +48,6 @@ export default defineComponent({
     }
 
     return {
-      props,
       onDMClick,
       ...useHomeChannel(username)
     }
diff --git a/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue b/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
index d0672df4d..f60f2deed 100644
--- a/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
+++ b/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
@@ -1,38 +1,31 @@
 <template>
   <section :class="$style.feature">
     <div>
-      <h1>{{ props.user.displayName }}</h1>
+      <h1>{{ user.displayName }}</h1>
       <p>
-        <online-indicator :userId="props.user.id" />
-        @{{ props.user.name }}
+        <online-indicator :userId="user.id" />
+        @{{ user.name }}
       </p>
     </div>
-    <buttons :username="props.user.name" :showTitle="true" />
+    <buttons :username="user.name" :showTitle="true" />
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import store from '@/store'
 import { User } from '@traptitech/traq'
 import OnlineIndicator from './OnlineIndicator.vue'
 import Buttons from './Buttons.vue'
 
-interface Props {
-  user: User
-}
-
 export default defineComponent({
   name: 'DesktopFeature',
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props) {
-    return { props }
-  },
   components: {
     OnlineIndicator,
     Buttons
diff --git a/src/components/Main/Modal/UserModal/Feature/Feature.vue b/src/components/Main/Modal/UserModal/Feature/Feature.vue
index bb3222ac6..3eff22f58 100644
--- a/src/components/Main/Modal/UserModal/Feature/Feature.vue
+++ b/src/components/Main/Modal/UserModal/Feature/Feature.vue
@@ -1,32 +1,33 @@
 <template>
-  <mobile-feature v-if="isMobile" :user="props.user" />
-  <desktop-feature v-else :user="props.user" />
+  <mobile-feature v-if="isMobile" :user="user" />
+  <desktop-feature v-else :user="user" />
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive, ref } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  ref,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import { User } from '@traptitech/traq'
 import DesktopFeature from './DesktopFeature.vue'
 import MobileFeature from './MobileFeature.vue'
 
-interface Props {
-  user: User
-}
-
 export default defineComponent({
   name: 'Feature',
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup() {
     const isMobile = computed(() => store.getters.ui.isMobile)
 
     return {
-      props,
       isMobile
     }
   },
diff --git a/src/components/Main/Modal/UserModal/Feature/LinkButton.vue b/src/components/Main/Modal/UserModal/Feature/LinkButton.vue
index 08b46262e..e63b714a3 100644
--- a/src/components/Main/Modal/UserModal/Feature/LinkButton.vue
+++ b/src/components/Main/Modal/UserModal/Feature/LinkButton.vue
@@ -1,12 +1,12 @@
 <template>
   <button :class="$style.button" :style="styles.button">
     <icon
-      :name="props.iconName"
-      :mdi="props.iconMdi"
+      :name="iconName"
+      :mdi="iconMdi"
       :class="$style.icon"
       :style="styles.icon"
     />
-    {{ props.title }}
+    {{ title }}
   </button>
 </template>
 
@@ -26,12 +26,6 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  title?: string
-  iconName: string
-  iconMdi: boolean
-}
-
 export default defineComponent({
   name: 'LinkButton',
   props: {
@@ -48,13 +42,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
 
-    return {
-      styles,
-      props
-    }
+    return { styles }
   },
   components: {
     Icon
diff --git a/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue b/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
index ce87f96d1..41e13b202 100644
--- a/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
+++ b/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
@@ -8,18 +8,18 @@
       :style="styles.icon"
     />
     <div :class="$style.name">
-      <h1>{{ props.user.displayName }}</h1>
+      <h1>{{ user.displayName }}</h1>
       <p>
-        <online-indicator :userId="props.user.id" />
-        @{{ props.user.name }}
+        <online-indicator :userId="user.id" />
+        @{{ user.name }}
       </p>
     </div>
-    <buttons :username="props.user.name" :showTitle="false" />
+    <buttons :username="user.name" :showTitle="false" />
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import { User } from '@traptitech/traq'
@@ -34,21 +34,17 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  user: User
-}
-
 export default defineComponent({
   name: 'MobileFeature',
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
-    return { props, styles }
+    return { styles }
   },
   components: {
     UserIcon,
diff --git a/src/components/Main/Modal/UserModal/Feature/OnlineIndicator.vue b/src/components/Main/Modal/UserModal/Feature/OnlineIndicator.vue
index 9bd74bd51..d83801689 100644
--- a/src/components/Main/Modal/UserModal/Feature/OnlineIndicator.vue
+++ b/src/components/Main/Modal/UserModal/Feature/OnlineIndicator.vue
@@ -3,7 +3,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive, Ref } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  Ref,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import { UserId } from '@/types/entity-ids'
@@ -16,29 +22,22 @@ const useStyles = (isOnline: Ref<boolean>) =>
     }))
   })
 
-interface Props {
-  userId: UserId
-}
-
 export default defineComponent({
   name: 'OnlineIndicator',
   props: {
     userId: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const isOnline = computed(() =>
       store.getters.domain.isUserOnline(props.userId)
     )
 
     const styles = useStyles(isOnline)
 
-    return {
-      props,
-      styles
-    }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Main/Modal/UserModal/GroupsTab.vue b/src/components/Main/Modal/UserModal/GroupsTab.vue
index 689a69773..a0674e675 100644
--- a/src/components/Main/Modal/UserModal/GroupsTab.vue
+++ b/src/components/Main/Modal/UserModal/GroupsTab.vue
@@ -18,7 +18,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import { UserDetail } from '@traptitech/traq'
@@ -31,21 +36,18 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  detail?: UserDetail
-}
-
 export default defineComponent({
   name: 'GroupsTab',
   props: {
-    detail: Object
+    detail: Object as PropType<UserDetail>
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles()
     const isLoading = computed(() => props.detail === undefined)
     const groups = computed(
       () =>
-        props.detail?.groups.map(
+        // TODO: https://github.com/vuejs/composition-api/issues/291
+        (props.detail as UserDetail | undefined)?.groups.map(
           groupId => store.state.entities.userGroups[groupId]
         ) ?? []
     )
diff --git a/src/components/Main/Modal/UserModal/NavigationContent.vue b/src/components/Main/Modal/UserModal/NavigationContent.vue
index 481417528..bb8dab90f 100644
--- a/src/components/Main/Modal/UserModal/NavigationContent.vue
+++ b/src/components/Main/Modal/UserModal/NavigationContent.vue
@@ -1,18 +1,18 @@
 <template>
   <section :class="$style.container" :style="styles.container">
     <profile-tab
-      v-if="props.currentNavigation === 'profile'"
-      :user="props.user"
+      v-if="currentNavigation === 'profile'"
+      :user="user"
       :detail="detail"
       :class="$style.content"
     />
     <groups-tab
-      v-if="props.currentNavigation === 'groups'"
+      v-if="currentNavigation === 'groups'"
       :detail="detail"
       :class="$style.content"
     />
     <tags-tab
-      v-if="props.currentNavigation === 'tags'"
+      v-if="currentNavigation === 'tags'"
       :detail="detail"
       :class="$style.content"
     />
@@ -22,10 +22,9 @@
 <script lang="ts">
 import {
   defineComponent,
-  ref,
   reactive,
   computed,
-  watch
+  PropType
 } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
@@ -45,11 +44,6 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  currentNavigation: NavigationItemType
-  user: User
-}
-
 export default defineComponent({
   name: 'NavigationContent',
   components: {
@@ -59,15 +53,15 @@ export default defineComponent({
   },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'profile' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'profile' as const
     },
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles()
 
     const detail = computed(() => store.state.domain.userDetails[props.user.id])
@@ -75,7 +69,6 @@ export default defineComponent({
 
     return {
       styles,
-      props,
       detail
     }
   }
diff --git a/src/components/Main/Modal/UserModal/NavigationSelector.vue b/src/components/Main/Modal/UserModal/NavigationSelector.vue
index 45ca29d95..7afdf2119 100644
--- a/src/components/Main/Modal/UserModal/NavigationSelector.vue
+++ b/src/components/Main/Modal/UserModal/NavigationSelector.vue
@@ -9,14 +9,19 @@
       <navigation-selector-item
         :iconName="item.iconName"
         :iconMdi="item.iconMdi"
-        :is-selected="props.currentNavigation === item.type"
+        :is-selected="currentNavigation === item.type"
       />
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  SetupContext,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { NavigationItemType, useNavigationSelectorItem } from './use/navigation'
 import NavigationSelectorItem from '@/components/Main/Modal/UserModal/NavigationSelectorItem.vue'
@@ -28,20 +33,16 @@ const useStyles = () =>
     }))
   })
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationSelector',
   components: { NavigationSelectorItem },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'profile' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'profile' as const
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = useStyles()
     const items: {
       type: NavigationItemType
@@ -65,7 +66,6 @@ export default defineComponent({
     const { onNavigationItemClick } = useNavigationSelectorItem(context)
     return {
       styles,
-      props,
       items,
       onNavigationItemClick
     }
diff --git a/src/components/Main/Modal/UserModal/NavigationSelectorItem.vue b/src/components/Main/Modal/UserModal/NavigationSelectorItem.vue
index 4edbc241c..19a350f19 100644
--- a/src/components/Main/Modal/UserModal/NavigationSelectorItem.vue
+++ b/src/components/Main/Modal/UserModal/NavigationSelectorItem.vue
@@ -10,7 +10,7 @@ import { makeStyles } from '@/lib/styles'
 import { NavigationItemType } from './use/navigation'
 import Icon from '@/components/UI/Icon.vue'
 
-const useStyles = (props: Props, size: number) =>
+const useStyles = (props: { isSelected: boolean }, size: number) =>
   reactive({
     item: makeStyles(theme => ({
       color: props.isSelected ? theme.accent.primary : theme.ui.secondary,
@@ -20,12 +20,6 @@ const useStyles = (props: Props, size: number) =>
     }))
   })
 
-type Props = {
-  iconName: string
-  iconMdi?: boolean
-  isSelected: boolean
-}
-
 export default defineComponent({
   name: 'NavigationSelectorItem',
   components: { Icon },
@@ -40,12 +34,11 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const size = 24
     const styles = useStyles(props, size)
     return {
       styles,
-      props,
       size
     }
   }
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/Accounts.vue b/src/components/Main/Modal/UserModal/ProfileTab/Accounts.vue
index 2015ac2b3..6d8104160 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/Accounts.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/Accounts.vue
@@ -13,7 +13,7 @@
         {{ wikiPageName }}
       </a>
     </p>
-    <p v-if="props.twitterId !== ''" :class="$style.p">
+    <p v-if="twitterId !== ''" :class="$style.p">
       <circle-icon
         name="twitter"
         mdi
@@ -21,10 +21,10 @@
         :background="iconBackgroundColor"
         :class="$style.icon"
       />
-      <template v-if="props.twitterId === undefined">Now Loading...</template>
+      <template v-if="twitterId === undefined">Now Loading...</template>
       <template v-else>
         <a :href="twitterLink" target="_blank" @click.stop="">
-          @{{ props.twitterId }}
+          @{{ twitterId }}
         </a>
       </template>
     </p>
@@ -37,12 +37,6 @@ import store from '@/store'
 import ProfileHeader from './ProfileHeader.vue'
 import CircleIcon from '@/components/UI/CircleIcon.vue'
 
-interface Props {
-  bot: boolean
-  name: string
-  twitterId?: string
-}
-
 export default defineComponent({
   name: 'Accounts',
   props: {
@@ -56,7 +50,7 @@ export default defineComponent({
     },
     twitterId: String
   },
-  setup(props: Props) {
+  setup(props) {
     const iconBackgroundColor = computed(() => store.state.app.theme.ui.primary)
     const iconColor = computed(() => store.state.app.theme.background.primary)
 
@@ -73,7 +67,6 @@ export default defineComponent({
       () => `https://twitter.com/${props.twitterId ?? ''}`
     )
     return {
-      props,
       iconColor,
       iconBackgroundColor,
       wikiPageName,
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/Bio.vue b/src/components/Main/Modal/UserModal/ProfileTab/Bio.vue
index 01fb43754..171a56cd3 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/Bio.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/Bio.vue
@@ -4,7 +4,7 @@
     <p :style="styles.bio">
       <template v-if="isLoading">[Now loading...]</template>
       <template v-else-if="isEmpty">[No bio]</template>
-      <template v-else>{{ props.bio }}</template>
+      <template v-else>{{ bio }}</template>
     </p>
   </section>
 </template>
@@ -21,16 +21,12 @@ const useStyles = (lowPriority: Ref<boolean>) =>
     }))
   })
 
-interface Props {
-  bio?: string
-}
-
 export default defineComponent({
   name: 'Bio',
   props: {
     bio: String
   },
-  setup(props: Props) {
+  setup(props) {
     const isLoading = computed(() => props.bio === undefined)
     const isEmpty = computed(() =>
       props.bio === undefined ? false : props.bio === ''
@@ -40,7 +36,6 @@ export default defineComponent({
 
     return {
       styles,
-      props,
       isLoading,
       isEmpty
     }
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/HomeChannel.vue b/src/components/Main/Modal/UserModal/ProfileTab/HomeChannel.vue
index b24654d2b..4c4f2bb6c 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/HomeChannel.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/HomeChannel.vue
@@ -8,7 +8,7 @@
         :class="$style.channel"
         @click="onHomeChannelClick"
       >
-        #gps/times/{{ props.name }}
+        #gps/times/{{ name }}
       </span>
       <span v-else>存在しません</span>
     </p>
@@ -31,10 +31,6 @@ const useStyles = (channelId: Ref<boolean>) =>
     }))
   })
 
-interface Props {
-  name: string
-}
-
 export default defineComponent({
   name: 'HomeChannel',
   props: {
@@ -43,14 +39,13 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const username = computed(() => props.name)
     const { homeChannelExists, onHomeChannelClick } = useHomeChannel(username)
     const styles = useStyles(homeChannelExists)
 
     return {
       styles,
-      props,
       homeChannelExists,
       onHomeChannelClick
     }
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/ProfileHeader.vue b/src/components/Main/Modal/UserModal/ProfileTab/ProfileHeader.vue
index 6d8e4c00e..017926571 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/ProfileHeader.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/ProfileHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 :class="$style.header" :style="styles.header">{{ props.text }}</h2>
+  <h2 :class="$style.header" :style="styles.header">{{ text }}</h2>
 </template>
 
 <script lang="ts">
@@ -13,10 +13,6 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  text: string
-}
-
 export default defineComponent({
   name: 'ProfileHeader',
   props: {
@@ -25,11 +21,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props: Props) {
+  setup() {
     const styles = useStyles()
     return {
-      styles,
-      props
+      styles
     }
   }
 })
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue b/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
index e9823a89e..1abde6d39 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <bio :bio="props.detail === undefined ? undefined : props.detail.bio" />
-    <home-channel :name="props.user.name" />
+    <home-channel :name="user.name" />
     <accounts
-      :bot="props.user.bot"
-      :name="props.user.name"
+      :bot="user.bot"
+      :name="user.name"
       :twitterId="
         props.detail === undefined ? undefined : props.detail.twitterId
       "
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { User, UserDetail } from '@traptitech/traq'
 import Bio from './Bio.vue'
@@ -28,23 +28,22 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  user: User
-  detail?: UserDetail
-}
-
 export default defineComponent({
   name: 'ProfileTab',
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     },
-    detail: Object
+    detail: Object as PropType<UserDetail>
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles()
-    return { styles, props }
+    return {
+      styles,
+      // TODO: https://github.com/vuejs/composition-api/issues/291
+      props: props as { detail?: UserDetail }
+    }
   },
   components: {
     Bio,
diff --git a/src/components/Main/Modal/UserModal/TagsTab.vue b/src/components/Main/Modal/UserModal/TagsTab.vue
index 27a6ec552..6e3ac647d 100644
--- a/src/components/Main/Modal/UserModal/TagsTab.vue
+++ b/src/components/Main/Modal/UserModal/TagsTab.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.tags" :style="styles.tags">
-    <template v-if="props.detail === undefined">Now loading...</template>
+    <template v-if="propst.detail === undefined">Now loading...</template>
     <template v-else>
       <ul :class="$style.list">
         <li
@@ -13,13 +13,18 @@
           {{ tag.tag }}
         </li>
       </ul>
-      <tags-tab-add :userId="props.detail.id" />
+      <tags-tab-add :userId="propst.detail.id" />
     </template>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import { UserDetail } from '@traptitech/traq'
@@ -33,24 +38,28 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  detail?: UserDetail
-}
-
 export default defineComponent({
   name: 'TagsTab',
   props: {
-    detail: Object
+    detail: Object as PropType<UserDetail>
   },
-  setup(props: Props) {
+  setup(props) {
+    // TODO: https://github.com/vuejs/composition-api/issues/291
+    const propst = props as { detail?: UserDetail }
+
     const styles = useStyles()
-    const tags = computed(() => props.detail?.tags ?? [])
+    const tags = computed(() => propst.detail?.tags ?? [])
 
     const onTagClick = () => {
       // TODO: Open tag modal
     }
 
-    return { styles, props, tags, onTagClick }
+    return {
+      styles,
+      tags,
+      onTagClick,
+      propst
+    }
   },
   components: {
     Icon,
diff --git a/src/components/Main/Modal/UserModal/TagsTabAdd.vue b/src/components/Main/Modal/UserModal/TagsTabAdd.vue
index 473925b1c..a542b8ead 100644
--- a/src/components/Main/Modal/UserModal/TagsTabAdd.vue
+++ b/src/components/Main/Modal/UserModal/TagsTabAdd.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from '@vue/composition-api'
+import { defineComponent, reactive, ref, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import apis from '@/lib/api'
 import { UserId } from '@/types/entity-ids'
@@ -41,19 +41,15 @@ const useStyles = () =>
     }))
   })
 
-interface Props {
-  userId: UserId
-}
-
 export default defineComponent({
   name: 'TagsTab',
   props: {
     userId: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles()
 
     const newTagName = ref('')
diff --git a/src/components/Main/Modal/UserModal/UserModal.vue b/src/components/Main/Modal/UserModal/UserModal.vue
index 7bfd5e4aa..ed762b4b6 100644
--- a/src/components/Main/Modal/UserModal/UserModal.vue
+++ b/src/components/Main/Modal/UserModal/UserModal.vue
@@ -29,7 +29,8 @@ import {
   computed,
   reactive,
   Ref,
-  toRefs
+  toRefs,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { makeStyles } from '@/lib/styles'
@@ -55,19 +56,15 @@ const useStyles = (iconSize: number, isMobile: Ref<boolean>) =>
     }))
   })
 
-interface Props {
-  id: UserId
-}
-
 export default defineComponent({
   name: 'UserModal',
   props: {
     id: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const isMobile = computed(() => store.getters.ui.isMobile)
 
     const iconSize = 160
diff --git a/src/components/Main/Navigation/ChannelList/ChannelElement.vue b/src/components/Main/Navigation/ChannelList/ChannelElement.vue
index bfa7f49c4..089ef7167 100644
--- a/src/components/Main/Navigation/ChannelList/ChannelElement.vue
+++ b/src/components/Main/Navigation/ChannelList/ChannelElement.vue
@@ -4,9 +4,9 @@
     <div :class="$style.channel">
       <div :class="$style.channelHash" @click="onChannelHashClick">
         <channel-element-hash
-          :has-child="!props.ignoreChildren && state.hasChild"
+          :has-child="!ignoreChildren && state.hasChild"
           :is-selected="state.isSelected"
-          :is-opened="props.isOpened"
+          :is-opened="isOpened"
           :has-notification="notificationState.hasNotification"
           :has-notification-on-child="notificationState.hasNotificationOnChild"
         />
@@ -16,16 +16,12 @@
         :style="styles.channelName"
         @click="onChannelNameClick"
       >
-        {{ path }}{{ props.channel.name }}
+        {{ path }}{{ channel.name }}
       </div>
     </div>
 
     <!-- 子チャンネル表示 -->
-    <div
-      :class="$style.children"
-      v-show="props.isOpened"
-      v-if="!props.ignoreChildren"
-    >
+    <div :class="$style.children" v-show="isOpened" v-if="!ignoreChildren">
       <channel-list :channels="state.children" />
     </div>
 
@@ -44,7 +40,8 @@ import {
   SetupContext,
   computed,
   ref,
-  reactive
+  reactive,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { ChannelTreeNode } from '@/store/domain/channelTree/state'
@@ -53,17 +50,6 @@ import { ChannelId } from '@/types/entity-ids'
 import ChannelList from './ChannelList.vue'
 import ChannelElementHash from './ChannelElementHash.vue'
 
-type Props = {
-  /** 対象チャンネル */
-  channel: ChannelTreeNode
-
-  /** 子チャンネルを展開表示しているか */
-  isOpened?: boolean
-
-  /** 子チャンネルを無視する */
-  ignoreChildren: boolean
-}
-
 const useAncestorPath = (skippedAncestorNames?: string[]) => {
   return {
     path: computed(() => skippedAncestorNames?.join('/')?.concat('/') ?? '')
@@ -99,7 +85,7 @@ const useStyles = (state: { isSelected: boolean }) => {
   return styles
 }
 
-const useNotification = (props: Props) => {
+const useNotification = (props: { channel: ChannelTreeNode }) => {
   const notificationState = reactive({
     hasNotification: computed(
       () => props.channel.id in store.state.domain.me.unreadChannelsSet
@@ -121,20 +107,23 @@ export default defineComponent({
     ChannelElementHash
   },
   props: {
+    /** 対象チャンネル */
     channel: {
-      type: Object,
+      type: Object as PropType<ChannelTreeNode>,
       required: true
     },
+    /** 子チャンネルを展開表示しているか */
     isOpened: {
       type: Boolean,
       default: false
     },
+    /** 子チャンネルを無視する */
     ignoreChildren: {
       type: Boolean,
       default: false
     }
   },
-  setup(props: Props, context) {
+  setup(props, context) {
     const state = reactive({
       children: computed(() => props.channel.children ?? []),
       hasChild: computed((): boolean => state.children.length > 0),
@@ -155,7 +144,6 @@ export default defineComponent({
 
     return {
       state,
-      props,
       styles,
       path,
       notificationState,
diff --git a/src/components/Main/Navigation/ChannelList/ChannelElementHash.vue b/src/components/Main/Navigation/ChannelList/ChannelElementHash.vue
index 9bae22c3a..a5bc28451 100644
--- a/src/components/Main/Navigation/ChannelList/ChannelElementHash.vue
+++ b/src/components/Main/Navigation/ChannelList/ChannelElementHash.vue
@@ -3,7 +3,7 @@
     <div :class="$style.hash" :style="styles.hash">
       <icon name="hash" />
     </div>
-    <div v-if="props.hasNotification" :class="$style.indicator">
+    <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator has-border />
     </div>
   </div>
@@ -14,7 +14,8 @@ import {
   defineComponent,
   SetupContext,
   reactive,
-  computed
+  computed,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { ChannelTreeNode } from '@/store/domain/channelTree/state'
@@ -22,29 +23,6 @@ import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 import NotificationIndicator from '@/components/UI/NotificationIndiator.vue'
 
-type Props = {
-  /** 子チャンネルを持っているか */
-  hasChild: boolean
-
-  /** 現在表示中のチャンネルか */
-  isSelected: boolean
-
-  /**
-   * チャンネルリストでアクティブ表示か
-   * e.g. ホームの非購読チャンネルはアクティブでない
-   */
-  isActive: boolean
-
-  /** 子チャンネルを展開表示しているか */
-  isOpened: boolean
-
-  /** 自分自身に通知があるか */
-  hasNotification: boolean
-
-  /** 子チャンネルに通知があるか */
-  hasNotificationOnChild: boolean
-}
-
 const useLeafContainerStyle = (selected: boolean) =>
   makeStyles(theme => ({
     color: selected ? theme.accent.primary : theme.ui.primary
@@ -78,32 +56,41 @@ export default defineComponent({
     NotificationIndicator
   },
   props: {
+    /** 子チャンネルを持っているか */
     hasChild: {
       type: Boolean,
       default: false
     },
+    /** 現在表示中のチャンネルか */
     isSelected: {
       type: Boolean,
       default: false
     },
+    /**
+     * チャンネルリストでアクティブ表示か
+     * e.g. ホームの非購読チャンネルはアクティブでない
+     */
     isActive: {
       type: Boolean,
       default: false
     },
+    /** 子チャンネルを展開表示しているか */
     isOpened: {
       type: Boolean,
       default: false
     },
+    /** 自分自身に通知があるか */
     hasNotification: {
       type: Boolean,
       default: false
     },
+    /** 子チャンネルに通知があるか */
     hasNotificationOnChild: {
       type: Boolean,
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const styles = reactive({
       hash: computed(() =>
         !props.hasChild
@@ -119,7 +106,7 @@ export default defineComponent({
         backgroundColor: theme.accent.notification
       }))
     })
-    return { props, styles }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Main/Navigation/ChannelList/ChannelList.vue b/src/components/Main/Navigation/ChannelList/ChannelList.vue
index dbfdfe88d..7f7edf7c6 100644
--- a/src/components/Main/Navigation/ChannelList/ChannelList.vue
+++ b/src/components/Main/Navigation/ChannelList/ChannelList.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="channel-list">
     <channel-element
-      v-for="channel in props.channels"
+      v-for="channel in channels"
       :key="channel.id"
       :class="$style.element"
       :channel="channel"
       :is-opened="channelFoldingState[channel.id]"
-      :ignore-children="props.ignoreChildren"
+      :ignore-children="ignoreChildren"
       @channel-select="onChannelSelect"
       @channel-folding-toggle="onChannelFoldingToggle"
     />
@@ -20,7 +20,8 @@ import {
   reactive,
   set,
   toRefs,
-  SetupContext
+  SetupContext,
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { ChannelId } from '@/types/entity-ids'
@@ -45,11 +46,6 @@ const useChannelFolding = () => {
   }
 }
 
-type Props = {
-  channels: ChannelTreeNode[]
-  ignoreChildren: boolean
-}
-
 export default defineComponent({
   name: 'ChannelList',
   components: {
@@ -58,7 +54,7 @@ export default defineComponent({
   },
   props: {
     channels: {
-      type: Array,
+      type: Array as PropType<ChannelTreeNode[]>,
       required: true
     },
     ignoreChildren: {
@@ -66,11 +62,10 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const { onChannelSelect } = useChannelSelect(context)
     const { channelFoldingState, onChannelFoldingToggle } = useChannelFolding()
     return {
-      props,
       channelFoldingState,
       onChannelSelect,
       onChannelFoldingToggle
diff --git a/src/components/Main/Navigation/DesktopNavigationSelector.vue b/src/components/Main/Navigation/DesktopNavigationSelector.vue
index 3db471278..cea56e918 100644
--- a/src/components/Main/Navigation/DesktopNavigationSelector.vue
+++ b/src/components/Main/Navigation/DesktopNavigationSelector.vue
@@ -7,7 +7,7 @@
       @click="onNavigationItemClick(item.type)"
     >
       <navigation-selector-item
-        :is-selected="props.currentNavigation === item.type"
+        :is-selected="currentNavigation === item.type"
         :icon-mdi="item.iconMdi"
         :icon-name="item.iconName"
       />
@@ -19,7 +19,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, toRefs } from '@vue/composition-api'
+import {
+  defineComponent,
+  SetupContext,
+  toRefs,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import {
   NavigationItemType,
@@ -28,20 +33,16 @@ import {
 import NavigationSelectorItem from '@/components/Main/Navigation/NavigationSelectorItem.vue'
 import Icon from '@/components/UI/Icon.vue'
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationSelector',
   components: { NavigationSelectorItem, Icon },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'home' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'home' as const
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context: SetupContext) {
     const items: {
       type: NavigationItemType
       iconName: string
@@ -75,7 +76,6 @@ export default defineComponent({
       store.dispatch.ui.modal.pushModal({ type: 'setting' })
 
     return {
-      props,
       items,
       onNavigationItemClick,
       onSettingClick
diff --git a/src/components/Main/Navigation/NavigationContent.vue b/src/components/Main/Navigation/NavigationContent.vue
index e46948790..3b82fca37 100644
--- a/src/components/Main/Navigation/NavigationContent.vue
+++ b/src/components/Main/Navigation/NavigationContent.vue
@@ -1,28 +1,30 @@
 <template>
   <div :class="$style.container">
-    <navigation-content-title :current-navigation="props.currentNavigation" />
-    <home v-show="props.currentNavigation === 'home'" :class="$style.content" />
+    <navigation-content-title :current-navigation="currentNavigation" />
+    <home v-show="currentNavigation === 'home'" :class="$style.content" />
     <channels
-      v-show="props.currentNavigation === 'channels'"
+      v-show="currentNavigation === 'channels'"
       :class="$style.content"
     />
     <activity
-      v-show="props.currentNavigation === 'activity'"
-      :class="$style.content"
-    />
-    <users
-      v-show="props.currentNavigation === 'users'"
+      v-show="currentNavigation === 'activity'"
       :class="$style.content"
     />
+    <users v-show="currentNavigation === 'users'" :class="$style.content" />
     <not-implemented
-      v-show="props.currentNavigation === 'services'"
+      v-show="currentNavigation === 'services'"
       :class="$style.content"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  computed,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import { ChannelId } from '@/types/entity-ids'
 import { NavigationItemType } from '@/components/Main/Navigation/use/navigation'
@@ -33,10 +35,6 @@ import Users from './NavigationContent/Users.vue'
 import NotImplemented from './NavigationContent/NotImplemented.vue'
 import NavigationContentTitle from './NavigationContentTitle.vue'
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationContent',
   components: {
@@ -49,11 +47,11 @@ export default defineComponent({
   },
   props: {
     currentNavigation: {
-      type: String,
-      default: 'home' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'home' as const
     }
   },
-  setup(props: Props) {
+  setup() {
     const state = reactive({
       channels: computed(() => store.state.entities.channels)
     })
@@ -61,7 +59,7 @@ export default defineComponent({
       () => store.state.domain.channelTree.channelTree.children ?? []
     )
 
-    return { state, props, topLevelChannels }
+    return { state, topLevelChannels }
   }
 })
 </script>
diff --git a/src/components/Main/Navigation/NavigationContent/Activity.vue b/src/components/Main/Navigation/NavigationContent/Activity.vue
index b17824861..95b20a140 100644
--- a/src/components/Main/Navigation/NavigationContent/Activity.vue
+++ b/src/components/Main/Navigation/NavigationContent/Activity.vue
@@ -20,14 +20,12 @@ import { makeStyles } from '@/lib/styles'
 import store from '@/store'
 import ActivityElement from './ActivityElement.vue'
 
-type Props = {}
-
 export default defineComponent({
   name: 'Activity',
   components: {
     ActivityElement
   },
-  setup(props: Props, context: SetupContext) {
+  setup(_, context: SetupContext) {
     const state = reactive({
       messages: computed(() => store.state.domain.channelActivity)
     })
diff --git a/src/components/Main/Navigation/NavigationContent/ActivityElement.vue b/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
index bb6fe846b..673ba61e9 100644
--- a/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
+++ b/src/components/Main/Navigation/NavigationContent/ActivityElement.vue
@@ -9,16 +9,16 @@
     </div>
     <div :class="$style.separator" :style="styles.separator"></div>
     <activity-element-user-name :user="state.user" :class="$style.user" />
-    <activity-element-content :content="props.message.content" />
+    <activity-element-content :content="message.content" />
   </div>
 </template>
 
 <script lang="ts">
 import {
   defineComponent,
-  SetupContext,
   computed,
-  reactive
+  reactive,
+  PropType
 } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { Message } from '@traptitech/traq'
@@ -27,10 +27,6 @@ import useChannelSelect from '@/use/channelSelect'
 import ActivityElementUserName from './ActivityElementUserName.vue'
 import ActivityElementContent from './ActivityElementContent.vue'
 
-type Props = {
-  message: Message
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -52,11 +48,11 @@ export default defineComponent({
   },
   props: {
     message: {
-      type: Object,
+      type: Object as PropType<Message>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const state = reactive({
       channelName: computed(
         () =>
@@ -71,7 +67,6 @@ export default defineComponent({
     const styles = useStyles()
     const { onChannelSelect } = useChannelSelect(context)
     return {
-      props,
       state,
       styles,
       onChannelSelect
diff --git a/src/components/Main/Navigation/NavigationContent/ActivityElementContent.vue b/src/components/Main/Navigation/NavigationContent/ActivityElementContent.vue
index 71fa19d2e..a5ff9cd9f 100644
--- a/src/components/Main/Navigation/NavigationContent/ActivityElementContent.vue
+++ b/src/components/Main/Navigation/NavigationContent/ActivityElementContent.vue
@@ -1,16 +1,14 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <!-- TODO: Markdownパース対応 -->
-    {{ props.content }}
+    {{ content }}
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import { defineComponent, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = { content: string }
-
 export default defineComponent({
   name: 'ActivityElementContent',
   props: {
@@ -19,14 +17,13 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = reactive({
       container: makeStyles(theme => ({
         color: theme.ui.primary
       }))
     })
     return {
-      props,
       styles
     }
   }
diff --git a/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue b/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
index ee4c7d17d..22ad6d93b 100644
--- a/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
+++ b/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
@@ -1,20 +1,18 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <user-icon :class="$style.icon" :userId="props.user.id" :size="20" />
+    <user-icon :class="$style.icon" :userId="user.id" :size="20" />
     <span>
-      {{ props.user.displayName }}
+      {{ user.displayName }}
     </span>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { User } from '@traptitech/traq'
 import UserIcon from '@/components/UI/UserIcon.vue'
 
-type Props = { user: User }
-
 export default defineComponent({
   name: 'ActivityElementUserName',
   components: {
@@ -22,18 +20,17 @@ export default defineComponent({
   },
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = reactive({
       container: makeStyles(theme => ({
         color: theme.ui.secondary
       }))
     })
     return {
-      props,
       styles
     }
   }
diff --git a/src/components/Main/Navigation/NavigationContent/Channels.vue b/src/components/Main/Navigation/NavigationContent/Channels.vue
index 53f44494b..7d88fa93b 100644
--- a/src/components/Main/Navigation/NavigationContent/Channels.vue
+++ b/src/components/Main/Navigation/NavigationContent/Channels.vue
@@ -8,14 +8,12 @@ import store from '@/store'
 import { makeStyles } from '@/lib/styles'
 import ChannelList from '@/components/Main/Navigation/ChannelList/ChannelList.vue'
 
-type Props = {}
-
 export default defineComponent({
   name: 'Channels',
   components: {
     ChannelList
   },
-  setup(props: Props) {
+  setup() {
     const topLevelChannels = computed(
       () => store.state.domain.channelTree.channelTree.children ?? []
     )
diff --git a/src/components/Main/Navigation/NavigationContent/Home.vue b/src/components/Main/Navigation/NavigationContent/Home.vue
index 4466fa42c..8f8b467d2 100644
--- a/src/components/Main/Navigation/NavigationContent/Home.vue
+++ b/src/components/Main/Navigation/NavigationContent/Home.vue
@@ -25,8 +25,6 @@ import EmptyState from '@/components/UI/EmptyState.vue'
 import ChannelList from '@/components/Main/Navigation/ChannelList/ChannelList.vue'
 import NavigationContentContainer from '@/components/Main/Navigation/NavigationContentContainer.vue'
 
-type Props = {}
-
 export default defineComponent({
   name: 'Home',
   components: {
@@ -34,7 +32,7 @@ export default defineComponent({
     EmptyState,
     NavigationContentContainer
   },
-  setup(props: Props) {
+  setup() {
     const topLevelChannels = computed(
       () => store.state.domain.channelTree.homeChannelTree.children ?? []
     )
diff --git a/src/components/Main/Navigation/NavigationContent/NotImplemented.vue b/src/components/Main/Navigation/NavigationContent/NotImplemented.vue
index cbfc64853..e8f4bfef0 100644
--- a/src/components/Main/Navigation/NavigationContent/NotImplemented.vue
+++ b/src/components/Main/Navigation/NavigationContent/NotImplemented.vue
@@ -7,14 +7,12 @@ import { defineComponent, SetupContext } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import EmptyState from '@/components/UI/EmptyState.vue'
 
-type Props = {}
-
 export default defineComponent({
   name: 'NotImplemented',
   components: {
     EmptyState
   },
-  setup(props: Props, context: SetupContext) {
+  setup(_, context: SetupContext) {
     return {
       containerStyle: makeStyles(theme => ({
         color: theme.ui.tertiary
diff --git a/src/components/Main/Navigation/NavigationContent/UsersElement.vue b/src/components/Main/Navigation/NavigationContent/UsersElement.vue
index 85617a7af..84c163e33 100644
--- a/src/components/Main/Navigation/NavigationContent/UsersElement.vue
+++ b/src/components/Main/Navigation/NavigationContent/UsersElement.vue
@@ -1,19 +1,17 @@
 <template>
   <div :class="$style.container" :style="containerStyle">
-    <user-icon :class="$style.icon" :userId="props.user.id" :size="36" />
-    <users-element-user-name :user="props.user" :class="$style.user" />
+    <user-icon :class="$style.icon" :userId="user.id" :size="36" />
+    <users-element-user-name :user="user" :class="$style.user" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext } from '@vue/composition-api'
+import { defineComponent, PropType } from '@vue/composition-api'
 import { User } from '@traptitech/traq'
 import { makeStyles } from '@/lib/styles'
 import UserIcon from '@/components/UI/UserIcon.vue'
 import UsersElementUserName from './UsersElementUserName.vue'
 
-type Props = { user: User }
-
 export default defineComponent({
   name: 'UsersElement',
   components: {
@@ -22,16 +20,15 @@ export default defineComponent({
   },
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const containerStyle = makeStyles(theme => ({
       color: theme.ui.tertiary
     }))
     return {
-      props,
       containerStyle
     }
   }
diff --git a/src/components/Main/Navigation/NavigationContent/UsersElementUserName.vue b/src/components/Main/Navigation/NavigationContent/UsersElementUserName.vue
index 15474a26e..900a46d55 100644
--- a/src/components/Main/Navigation/NavigationContent/UsersElementUserName.vue
+++ b/src/components/Main/Navigation/NavigationContent/UsersElementUserName.vue
@@ -1,19 +1,17 @@
 <template>
   <div :class="$style.container">
     <div :class="$style.displayName" :style="styles.displayName">
-      {{ props.user.displayName }}
+      {{ user.displayName }}
     </div>
-    <div :class="$style.name" :style="styles.name">@{{ props.user.name }}</div>
+    <div :class="$style.name" :style="styles.name">@{{ user.name }}</div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import { User } from '@traptitech/traq'
 
-type Props = { user: User }
-
 const useStyles = () =>
   reactive({
     displayName: makeStyles(theme => ({
@@ -28,16 +26,13 @@ export default defineComponent({
   name: 'UsersElementUserName',
   props: {
     user: {
-      type: Object,
+      type: Object as PropType<User>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup() {
     const styles = useStyles()
-    return {
-      props,
-      styles
-    }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue b/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
index e81d04e8d..19af2dc35 100644
--- a/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
+++ b/src/components/Main/Navigation/NavigationContent/UsersSeparator.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" :style="containerStyle">
-    {{ props.name }}
+    {{ name }}
     <div :class="$style.line"></div>
     <icon name="rounded-triangle" :class="$style.icon" :style="iconStyle" />
   </div>
@@ -12,8 +12,6 @@ import store from '@/store'
 import { makeStyles } from '@/lib/styles'
 import Icon from '@/components/UI/Icon.vue'
 
-type Props = { name: string; isOpen: boolean }
-
 export default defineComponent({
   name: 'UsersSeparator',
   components: {
@@ -23,9 +21,8 @@ export default defineComponent({
     name: { type: String, default: '' },
     isOpen: { type: Boolean, default: false }
   },
-  setup(props: Props) {
+  setup(props) {
     return {
-      props,
       containerStyle: makeStyles(theme => ({
         borderColor: theme.ui.tertiary,
         color: theme.ui.secondary
diff --git a/src/components/Main/Navigation/NavigationContentContainer.vue b/src/components/Main/Navigation/NavigationContentContainer.vue
index 964641d87..96c7f7d5a 100644
--- a/src/components/Main/Navigation/NavigationContentContainer.vue
+++ b/src/components/Main/Navigation/NavigationContentContainer.vue
@@ -2,7 +2,7 @@
   <!-- TODO: 折り畳み -->
   <div>
     <h3
-      v-if="props.subtitle && props.subtitle.length > 0"
+      v-if="subtitle && subtitle.length > 0"
       :class="$style.subtitle"
       :style="subtitleStyle"
     >
@@ -16,22 +16,16 @@
 import { defineComponent } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = { subtitle?: string }
-
 export default defineComponent({
   name: 'NavigationContentContainer',
   props: {
-    subtitle: {
-      type: String,
-      required: false
-    }
+    subtitle: String
   },
-  setup(props: Props) {
+  setup() {
     const subtitleStyle = makeStyles(theme => ({
       color: theme.ui.secondary
     }))
     return {
-      props,
       subtitleStyle
     }
   }
diff --git a/src/components/Main/Navigation/NavigationContentTitle.vue b/src/components/Main/Navigation/NavigationContentTitle.vue
index 5a470dec8..230a34f5a 100644
--- a/src/components/Main/Navigation/NavigationContentTitle.vue
+++ b/src/components/Main/Navigation/NavigationContentTitle.vue
@@ -5,26 +5,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed, PropType } from '@vue/composition-api'
 import {
   NavigationItemType,
   navigationTypeNameMap
 } from '@/components/Main/Navigation/use/navigation'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  currentNavigation: NavigationItemType
-}
-
 export default defineComponent({
   name: 'NavigationContentTitle',
   props: {
     currentNavigation: {
-      type: String,
-      default: 'home' as NavigationItemType
+      type: String as PropType<NavigationItemType>,
+      default: 'home' as const
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const title = computed(() => navigationTypeNameMap[props.currentNavigation])
     const containerStyle = makeStyles(theme => ({
       color: theme.ui.primary
diff --git a/src/components/Main/Navigation/NavigationSelectorItem.vue b/src/components/Main/Navigation/NavigationSelectorItem.vue
index 584d87a43..add7fe606 100644
--- a/src/components/Main/Navigation/NavigationSelectorItem.vue
+++ b/src/components/Main/Navigation/NavigationSelectorItem.vue
@@ -1,12 +1,7 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <div :class="$style.icon" :style="styles.icon">
-      <icon
-        :name="props.iconName"
-        :mdi="props.iconMdi"
-        :width="24"
-        :height="24"
-      />
+      <icon :name="iconName" :mdi="iconMdi" :width="24" :height="24" />
     </div>
   </div>
 </template>
@@ -31,13 +26,6 @@ const useStyles = (props: { isSelected: boolean }) => {
   })
 }
 
-type Props = {
-  iconName: string
-  iconMdi: boolean
-  isSelected: boolean
-  hasNotification: boolean
-}
-
 export default defineComponent({
   name: 'NavigationSelectorItem',
   components: { Icon },
@@ -59,9 +47,9 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles(props)
-    return { props, styles }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/Main/StampPicker/StampPickerEffectSelector.vue b/src/components/Main/StampPicker/StampPickerEffectSelector.vue
index ca1e80e77..55965ffa1 100644
--- a/src/components/Main/StampPicker/StampPickerEffectSelector.vue
+++ b/src/components/Main/StampPicker/StampPickerEffectSelector.vue
@@ -3,16 +3,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, SetupContext } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import store from '@/store'
 import { StampId } from '@/types/entity-ids'
 import { makeStyles } from '@/lib/styles'
 import { buildFilePath } from '@/lib/api'
 
-type Props = {
-  stampId: StampId
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -24,11 +20,11 @@ export default defineComponent({
   name: 'StampPickerEffectSelector',
   props: {
     stampId: {
-      type: String,
+      type: String as PropType<StampId>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props) {
     const fileId = store.state.entities.stamps[props.stampId]?.fileId ?? ''
     const imageUrl = fileId ? `${buildFilePath(fileId)}` : ''
     return { imageUrl }
diff --git a/src/components/Main/StampPicker/StampPickerEffectToggleButton.vue b/src/components/Main/StampPicker/StampPickerEffectToggleButton.vue
index 5dcdf4bdf..5f780035f 100644
--- a/src/components/Main/StampPicker/StampPickerEffectToggleButton.vue
+++ b/src/components/Main/StampPicker/StampPickerEffectToggleButton.vue
@@ -9,16 +9,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, reactive } from '@vue/composition-api'
+import { defineComponent, reactive } from '@vue/composition-api'
 import Icon from '@/components/UI/Icon.vue'
 import { makeStyles } from '@/lib/styles'
 import { transparentize } from '@/lib/util/color'
 
-type Props = {
-  isActive: boolean
-}
-
-const useStyles = (props: Props) =>
+const useStyles = (props: { isActive: boolean }) =>
   reactive({
     container: makeStyles(theme => ({
       background: theme.background.secondary,
@@ -37,7 +33,7 @@ export default defineComponent({
   props: {
     isActive: { type: Boolean, default: false }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = useStyles(props)
     return { context, styles }
   }
diff --git a/src/components/Main/StampPicker/StampPickerStampList.vue b/src/components/Main/StampPicker/StampPickerStampList.vue
index ad2c1a177..c8f6cf6ea 100644
--- a/src/components/Main/StampPicker/StampPickerStampList.vue
+++ b/src/components/Main/StampPicker/StampPickerStampList.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.container">
     <stamp-picker-stamp-list-item
-      v-for="stamp in props.stamps"
+      v-for="stamp in stamps"
       :key="stamp.id"
       :stamp-id="stamp.id"
       @click="onClickStamp(stamp.id)"
@@ -11,16 +11,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext } from '@vue/composition-api'
+import { defineComponent, PropType } from '@vue/composition-api'
 import store from '@/store'
 import StampPickerStampListItem from './StampPickerStampListItem.vue'
 import { StampId } from '@/types/entity-ids'
 import { Stamp } from '@traptitech/traq'
 
-type Props = {
-  stamps: Stamp[]
-}
-
 export default defineComponent({
   name: 'StampPickerStampList',
   components: {
@@ -28,18 +24,18 @@ export default defineComponent({
   },
   props: {
     stamps: {
-      type: Array,
+      type: Array as PropType<Stamp[]>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const onClickStamp = (id: StampId) => {
       context.emit('input-stamp', id)
     }
     const onStampHover = (name: string) => {
       context.emit('hover-stamp', name)
     }
-    return { props, onClickStamp, onStampHover }
+    return { onClickStamp, onStampHover }
   }
 })
 </script>
diff --git a/src/components/Main/StampPicker/StampPickerStampListItem.vue b/src/components/Main/StampPicker/StampPickerStampListItem.vue
index b50f1ddae..80d70d766 100644
--- a/src/components/Main/StampPicker/StampPickerStampListItem.vue
+++ b/src/components/Main/StampPicker/StampPickerStampListItem.vue
@@ -6,12 +6,17 @@
     :class="$style.container"
     :style="styles.container"
   >
-    <stamp :stamp-id="props.stampId" :size="24" />
+    <stamp :stamp-id="stampId" :size="24" />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, SetupContext } from '@vue/composition-api'
+import {
+  defineComponent,
+  reactive,
+  SetupContext,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import { StampId } from '@/types/entity-ids'
 import { makeStyles } from '@/lib/styles'
@@ -19,10 +24,6 @@ import useHover, { HoverState } from '@/use/hover'
 import { buildFilePath } from '@/lib/api'
 import Stamp from '@/components/UI/Stamp.vue'
 
-type Props = {
-  stampId: StampId
-}
-
 const useStyles = (hoverState: HoverState) =>
   reactive({
     container: makeStyles(theme => ({
@@ -37,16 +38,16 @@ export default defineComponent({
   },
   props: {
     stampId: {
-      type: String,
+      type: String as PropType<StampId>,
       required: true
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const fileId = store.state.entities.stamps[props.stampId]?.fileId ?? ''
     const imageUrl = fileId ? `${buildFilePath(fileId)}` : ''
     const { hoverState, onMouseEnter, onMouseLeave } = useHover(context, true)
     const styles = useStyles(hoverState)
-    return { props, context, imageUrl, onMouseEnter, onMouseLeave, styles }
+    return { context, imageUrl, onMouseEnter, onMouseLeave, styles }
   }
 })
 </script>
diff --git a/src/components/Main/StampPicker/StampPickerStampSetSelector.vue b/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
index 97f40cad2..6967fb69a 100644
--- a/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
+++ b/src/components/Main/StampPicker/StampPickerStampSetSelector.vue
@@ -2,11 +2,11 @@
   <div :class="$style.container" :style="styles.container">
     <div :class="$style.innerContainer">
       <stamp-picker-stamp-set-selector-item
-        v-for="set in props.stampSets"
+        v-for="set in stampSets"
         :key="set.id"
         :class="$style.item"
         :stamp-set="set"
-        :is-active="props.currentStampSet.id === set.id"
+        :is-active="currentStampSet.id === set.id"
         @click="onStampSetSelect(set)"
       />
     </div>
@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, SetupContext } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import store from '@/store'
 import { StampPaletteId } from '@/types/entity-ids'
 import { makeStyles } from '@/lib/styles'
@@ -23,12 +23,6 @@ import { StampSet } from './use/stampSetSelector'
 import StampPickerStampSetSelectorItem from './StampPickerStampSetSelectorItem.vue'
 import { StampCategory } from '@/lib/stampCategorizer'
 
-type Props = {
-  currentStampSet: StampSet
-  stampSets: StampSet[]
-  foldedStampSets: StampSet[]
-}
-
 const useStyles = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -43,24 +37,24 @@ export default defineComponent({
   },
   props: {
     currentStampSet: {
-      type: Object,
+      type: Object as PropType<StampSet>,
       required: true
     },
     stampSets: {
-      type: Array,
+      type: Array as PropType<StampSet[]>,
       required: true
     },
     foldedStampSets: {
-      type: Array,
+      type: Array as PropType<StampSet[]>,
       default: () => []
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const onStampSetSelect = (stampSet: StampSet) => {
       context.emit('stamp-set-select', stampSet)
     }
     const styles = useStyles()
-    return { props, styles, onStampSetSelect }
+    return { styles, onStampSetSelect }
   }
 })
 </script>
diff --git a/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue b/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
index fc7a9820e..8177dfa09 100644
--- a/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
+++ b/src/components/Main/StampPicker/StampPickerStampSetSelectorItem.vue
@@ -5,24 +5,24 @@
     @click="context.emit('click')"
   >
     <div
-      v-if="props.isActive"
+      v-if="isActive"
       :class="$style.indicator"
       :style="styles.indicator"
     ></div>
     <stamp
-      v-if="props.stampSet.type === 'palette'"
-      :stamp-id="pickThumbnail(props.stampSet.id)"
+      v-if="stampSet.type === 'palette'"
+      :stamp-id="pickThumbnail(stampSet.id)"
       :size="24"
       :style="styles.paletteStamp"
     />
     <icon
-      v-else-if="props.stampSet.type === 'category'"
-      :name="`stampCategory/${props.stampSet.id}`"
+      v-else-if="stampSet.type === 'category'"
+      :name="`stampCategory/${stampSet.id}`"
       :size="24"
       :style="styles.icon"
     />
     <icon
-      v-else-if="props.stampSet.type === 'history'"
+      v-else-if="stampSet.type === 'history'"
       mdi
       name="history"
       :size="24"
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, SetupContext } from '@vue/composition-api'
+import { defineComponent, reactive, PropType } from '@vue/composition-api'
 import store from '@/store'
 import { StampPaletteId } from '@/types/entity-ids'
 import { makeStyles } from '@/lib/styles'
@@ -41,12 +41,7 @@ import Icon from '@/components/UI/Icon.vue'
 import Stamp from '@/components/UI/Stamp.vue'
 import { StampSet } from './use/stampSetSelector'
 
-type Props = {
-  stampSet: StampSet
-  isActive: boolean
-}
-
-const useStyles = (props: Props) =>
+const useStyles = (props: { isActive: boolean }) =>
   reactive({
     container: makeStyles(theme => ({
       color: props.isActive ? theme.accent.primary : theme.ui.secondary
@@ -81,7 +76,7 @@ export default defineComponent({
   },
   props: {
     stampSet: {
-      type: Object,
+      type: Object as PropType<StampSet>,
       required: true
     },
     isActive: {
@@ -89,10 +84,10 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = useStyles(props)
     const { pickThumbnail } = useStampPaletteThumbnail()
-    return { props, context, styles, pickThumbnail }
+    return { context, styles, pickThumbnail }
   }
 })
 </script>
diff --git a/src/components/UI/CircleIcon.vue b/src/components/UI/CircleIcon.vue
index 3645df58a..aa3e15889 100644
--- a/src/components/UI/CircleIcon.vue
+++ b/src/components/UI/CircleIcon.vue
@@ -2,10 +2,10 @@
   <div :class="$style.circle" :style="styles.icon">
     <icon
       :class="$style.icon"
-      :name="props.name"
-      :mdi="props.mdi"
-      :size="props.innerSize"
-      :color="props.color"
+      :name="name"
+      :mdi="mdi"
+      :size="innerSize"
+      :color="color"
     />
   </div>
 </template>
@@ -25,15 +25,6 @@ const useStyles = (props: { background: string; size: number }) => {
   })
 }
 
-type Props = {
-  color: string
-  background: string
-  name: string
-  mdi?: boolean
-  innerSize: number
-  size: number
-}
-
 export default defineComponent({
   name: 'CircleIcon',
   components: { Icon },
@@ -60,9 +51,9 @@ export default defineComponent({
       default: 24
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const styles = useStyles(props)
-    return { props, styles }
+    return { styles }
   }
 })
 </script>
diff --git a/src/components/UI/EmptyState.vue b/src/components/UI/EmptyState.vue
index 1dda6241a..344b3493e 100644
--- a/src/components/UI/EmptyState.vue
+++ b/src/components/UI/EmptyState.vue
@@ -8,11 +8,9 @@
 import { defineComponent } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {}
-
 export default defineComponent({
   name: 'EmptyState',
-  setup(props: Props) {
+  setup() {
     return {
       containerStyle: makeStyles(theme => ({
         color: theme.ui.tertiary
diff --git a/src/components/UI/FilterInput.vue b/src/components/UI/FilterInput.vue
index 676158c90..ced8c1cc4 100644
--- a/src/components/UI/FilterInput.vue
+++ b/src/components/UI/FilterInput.vue
@@ -4,8 +4,8 @@
     <input
       :class="$style.input"
       :style="$style.input"
-      :value="props.text"
-      :placeholder="props.placeholder"
+      :value="text"
+      :placeholder="placeholder"
       @input="onInput"
       type="text"
     />
@@ -13,18 +13,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, SetupContext } from '@vue/composition-api'
+import { defineComponent, reactive } from '@vue/composition-api'
 import Icon from '@/components/UI/Icon.vue'
 import { makeStyles } from '@/lib/styles'
 import useInput from '@/use/input'
 
-type Props = {
-  text: string
-  onSecondary: boolean
-  placeholder: string
-}
-
-const useStyles = (props: Props) =>
+const useStyles = (props: { onSecondary: boolean }) =>
   reactive({
     container: makeStyles(theme => ({
       background: props.onSecondary
@@ -56,10 +50,10 @@ export default defineComponent({
       default: ''
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const styles = useStyles(props)
     const { onInput } = useInput(context)
-    return { styles, props, onInput }
+    return { styles, onInput }
   }
 })
 </script>
diff --git a/src/components/UI/Icon.vue b/src/components/UI/Icon.vue
index e0efb21ba..18bd5a9ed 100644
--- a/src/components/UI/Icon.vue
+++ b/src/components/UI/Icon.vue
@@ -1,24 +1,24 @@
 <template>
   <svg
     v-if="mdi"
-    :width="props.size"
-    :height="props.size"
+    :width="size"
+    :height="size"
     viewBox="0 0 24 24"
     class="icon"
-    :style="{ color: props.color }"
+    :style="{ color: color }"
     v-bind="context.attrs"
     v-on="context.listeners"
     role="img"
   >
-    <title>{{ props.name }}</title>
-    <path :d="getMdiPath(props.name)" />
+    <title>{{ name }}</title>
+    <path :d="getMdiPath(name)" />
   </svg>
   <component
     v-else
     :is="svgComponent"
-    :width="props.size"
-    :height="props.size"
-    :style="{ color: props.color }"
+    :width="size"
+    :height="size"
+    :style="{ color: color }"
     viewBox="0 0 24 24"
     class="icon"
     v-bind="context.attrs"
@@ -28,16 +28,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, SetupContext, computed } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 import mdi from '@/assets/mdi'
 
-interface Props {
-  name: string
-  size?: number
-  color?: string
-  mdi?: boolean
-}
-
 export default defineComponent({
   name: 'Icon',
   props: {
@@ -60,7 +53,7 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props, context) {
     const svgComponent = computed(() => () =>
       import(`@/assets/icons/${[props.name]}.svg`)
     )
@@ -70,7 +63,6 @@ export default defineComponent({
     }
 
     return {
-      props,
       context,
       svgComponent,
       getMdiPath
diff --git a/src/components/UI/NotificationIndiator.vue b/src/components/UI/NotificationIndiator.vue
index 87086a178..4aad22454 100644
--- a/src/components/UI/NotificationIndiator.vue
+++ b/src/components/UI/NotificationIndiator.vue
@@ -3,20 +3,10 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  SetupContext,
-  reactive,
-  computed
-} from '@vue/composition-api'
+import { defineComponent } from '@vue/composition-api'
 import store from '@/store'
 import { makeStyles } from '../../lib/styles'
 
-type Props = {
-  color: string
-  hasBorder: boolean
-}
-
 export default defineComponent({
   name: 'NotificationIndicator',
   props: {
@@ -29,7 +19,7 @@ export default defineComponent({
       default: false
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const style = makeStyles(theme => ({
       background: theme.accent.notification,
       borderColor: props.color,
diff --git a/src/components/UI/Stamp.vue b/src/components/UI/Stamp.vue
index 8e1e6e1ff..5cec5db9b 100644
--- a/src/components/UI/Stamp.vue
+++ b/src/components/UI/Stamp.vue
@@ -15,19 +15,14 @@ import {
   defineComponent,
   reactive,
   computed,
-  SetupContext
+  PropType
 } from '@vue/composition-api'
 import store from '@/store'
 import { StampId } from '@/types/entity-ids'
 import { makeStyles } from '@/lib/styles'
 import { buildFilePath } from '@/lib/api'
 
-type Props = {
-  stampId: StampId
-  size: number
-}
-
-const useStyles = (props: Props) =>
+const useStyles = (props: { size: number }) =>
   reactive({
     container: makeStyles(theme => ({
       maxWidth: `${props.size}px`,
@@ -43,7 +38,7 @@ export default defineComponent({
   name: 'Stamp',
   props: {
     stampId: {
-      type: String,
+      type: String as PropType<StampId>,
       required: true
     },
     size: {
@@ -51,7 +46,7 @@ export default defineComponent({
       default: 24
     }
   },
-  setup(props: Props) {
+  setup(props) {
     const name = computed(
       () => store.state.entities.stamps[props.stampId]?.name ?? ''
     )
@@ -60,7 +55,7 @@ export default defineComponent({
       return fileId ? `${buildFilePath(fileId)}` : ''
     })
     const styles = useStyles(props)
-    return { props, imageUrl, name, styles }
+    return { imageUrl, name, styles }
   }
 })
 </script>
diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 3a917d42a..7d05245bf 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -9,7 +9,8 @@ import {
   defineComponent,
   SetupContext,
   reactive,
-  computed
+  computed,
+  PropType
 } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 import api, { buildUserIconPath } from '@/lib/api'
@@ -18,25 +19,23 @@ import store from '@/store'
 
 type IconSize = 160 | 64 | 48 | 44 | 40 | 36 | 32 | 28 | 24 | 20
 
-type Props = { userId: UserId; size: IconSize; preventModal: boolean }
-
 export default defineComponent({
   name: 'UserIcon',
   props: {
     userId: {
-      type: String,
+      type: String as PropType<UserId>,
       required: true
     },
     size: {
-      type: Number,
-      default: 36 as IconSize
+      type: Number as PropType<IconSize>,
+      default: 36
     },
     preventModal: {
       type: Boolean,
       default: false
     }
   },
-  setup(props: Props, context: SetupContext) {
+  setup(props) {
     const styles = reactive({
       container: makeStyles(theme => ({
         color: theme.ui.secondary,
@@ -58,7 +57,6 @@ export default defineComponent({
       }
     }
     return {
-      props,
       styles,
       onClick
     }
diff --git a/src/components/UI/VirtualScroller.vue b/src/components/UI/VirtualScroller.vue
index d906f5d4f..dbcc56402 100644
--- a/src/components/UI/VirtualScroller.vue
+++ b/src/components/UI/VirtualScroller.vue
@@ -4,8 +4,8 @@
       <div ref="spacerRef" :class="$style.spacer" :style="styles.spacerStyle">
         <div
           v-for="(item, index) in data.visibleItems"
-          :key="item[props.key]"
-          :ref="item[props.key]"
+          :key="item[key]"
+          :ref="item[key]"
           :data-index="index"
         >
           <slot :item="item" />
@@ -25,17 +25,11 @@ import {
   toRefs,
   onMounted,
   onUnmounted,
-  watch
+  watch,
+  PropType
 } from '@vue/composition-api'
-import { SetupContext } from '@vue/composition-api/dist/component/component'
 // import { ResizeObserver } from '@juggle/resize-observer'
-
-const throttle = require('lodash.throttle')
-
-interface Props {
-  items: any[]
-  key: string
-}
+import { throttle } from 'lodash-es'
 
 const binarySearch = (arr: number[], x: number) => {
   let low = 0
@@ -90,8 +84,17 @@ const PAGE_SIZE = 50
 
 export default defineComponent({
   name: 'VirtualScroller',
-  props: { items: Array },
-  setup(props: Props, context: SetupContext) {
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    key: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, context) {
     const state = reactive({
       isMounted: false,
       isLoading: false,
@@ -303,7 +306,6 @@ export default defineComponent({
     )
 
     return {
-      props,
       rootRef,
       spacerRef,
       handleScroll,
diff --git a/src/views/Auth.vue b/src/views/Auth.vue
index a0cac3933..8ad0df921 100644
--- a/src/views/Auth.vue
+++ b/src/views/Auth.vue
@@ -1,28 +1,29 @@
 <template>
-  <authenticate-main-view v-if="state.show" :type="props.type" />
+  <authenticate-main-view v-if="state.show" :type="type" />
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from '@vue/composition-api'
+import {
+  defineComponent,
+  onMounted,
+  reactive,
+  PropType
+} from '@vue/composition-api'
 import store from '@/store'
 import AuthenticateMainView from '@/components/Authenticate/AuthenticateMainView.vue'
 
-type Props = {
-  type: 'login' | 'password-reset' | 'registration'
-}
-
 export default defineComponent({
   name: 'Auth',
   props: {
     type: {
-      type: String,
-      default: 'login'
+      type: String as PropType<'login' | 'password-reset' | 'registration'>,
+      default: 'login' as const
     }
   },
   components: {
     AuthenticateMainView
   },
-  setup(props: Props) {
+  setup() {
     const state = reactive({
       show: false
     })
@@ -34,7 +35,7 @@ export default defineComponent({
         state.show = true
       }
     })
-    return { props, state }
+    return { state }
   }
 })
 </script>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 547c1ce63..cbcf0d59c 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -3,8 +3,8 @@
     <h1>
       Not Found
     </h1>
-    <div v-if="props.routeName && props.routeParam">
-      {{ props.routeName }} {{ props.routeParam }} is not found on traQ!
+    <div v-if="routeName && routeParam">
+      {{ routeName }} {{ routeParam }} is not found on traQ!
     </div>
     <div v-else>Path {{ $route.path }} is not found on traQ!</div>
     <router-link to="/">back</router-link>
@@ -15,11 +15,6 @@
 import { defineComponent, reactive } from '@vue/composition-api'
 import { makeStyles } from '@/lib/styles'
 
-type Props = {
-  routeName?: string
-  routeParam?: string
-}
-
 const useStyle = () =>
   reactive({
     container: makeStyles(theme => ({
@@ -30,18 +25,11 @@ const useStyle = () =>
 export default defineComponent({
   name: 'NotFound',
   props: {
-    routeName: {
-      type: String,
-      required: false
-    },
-    routeParam: {
-      type: String,
-      required: false
-    }
+    routeName: String,
+    routeParam: String
   },
-  setup(props: Props) {
+  setup() {
     return {
-      props,
       style: useStyle()
     }
   }

From bb305400dbb97ad8f6bf0c4765dedccf78292963 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Tue, 7 Apr 2020 21:44:33 +0900
Subject: [PATCH 2/2] vue/strongly-recommended

---
 .eslintrc.js                                           |  6 +++++-
 .../Main/MainView/MainViewComponentSelector.vue        |  2 +-
 src/components/Main/MainView/MainViewController.vue    |  4 ++--
 .../Main/MainView/MessageElement/MessageElement.vue    | 10 +++++-----
 .../Main/MainView/MessageElement/MessageFileList.vue   |  6 +++---
 .../MainView/MessageElement/MessageFileListFile.vue    |  2 +-
 .../MainView/MessageElement/MessageFileListVideo.vue   |  2 +-
 .../Main/MainView/MessageElement/MessageHeader.vue     |  4 ++--
 src/components/Main/MainView/MessagesScroller.vue      |  2 +-
 src/components/Main/MainView/MessagesView.vue          |  2 +-
 .../Main/Modal/SettingModal/NavigationSelector.vue     |  4 ++--
 .../Main/Modal/SettingModal/SettingModal.vue           |  2 +-
 .../Main/Modal/UserModal/Feature/Buttons.vue           |  8 ++++----
 .../Main/Modal/UserModal/Feature/DesktopFeature.vue    |  4 ++--
 .../Main/Modal/UserModal/Feature/MobileFeature.vue     |  8 ++++----
 .../Main/Modal/UserModal/NavigationSelector.vue        |  4 ++--
 .../Main/Modal/UserModal/ProfileTab/ProfileTab.vue     |  2 +-
 src/components/Main/Modal/UserModal/TagsTab.vue        |  2 +-
 src/components/Main/Modal/UserModal/UserModal.vue      |  6 +++---
 .../NavigationContent/ActivityElementUserName.vue      |  2 +-
 .../Main/Navigation/NavigationContent/UsersElement.vue |  2 +-
 src/components/UI/Icon.vue                             |  2 +-
 src/views/Main.vue                                     |  2 +-
 23 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 795f27ed1..d6f99f161 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,7 +6,11 @@ module.exports = {
   parserOptions: {
     parser: '@typescript-eslint/parser'
   },
-  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
+  extends: [
+    'plugin:vue/strongly-recommended',
+    '@vue/prettier',
+    '@vue/typescript'
+  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
diff --git a/src/components/Main/MainView/MainViewComponentSelector.vue b/src/components/Main/MainView/MainViewComponentSelector.vue
index 3ae58e60c..0392b5f76 100644
--- a/src/components/Main/MainView/MainViewComponentSelector.vue
+++ b/src/components/Main/MainView/MainViewComponentSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <messages-view
     v-if="props.viewInfo && props.viewInfo.type === 'messages'"
-    :channelId="channelId"
+    :channel-id="channelId"
   />
   <qall-view v-else-if="props.viewInfo && props.viewInfo.type === 'qall'" />
   <div :class="$style.none" v-else></div>
diff --git a/src/components/Main/MainView/MainViewController.vue b/src/components/Main/MainView/MainViewController.vue
index e8ade2655..4cdfe5359 100644
--- a/src/components/Main/MainView/MainViewController.vue
+++ b/src/components/Main/MainView/MainViewController.vue
@@ -6,11 +6,11 @@
     <div :class="$style.layoutContainer" :data-layout="state.layout">
       <main-view-component-selector
         :class="[$style.componentContainer, $style.primary]"
-        :viewInfo="state.primary"
+        :view-info="state.primary"
       />
       <main-view-component-selector
         :class="[$style.componentContainer, $style.secondary]"
-        :viewInfo="state.secondary"
+        :view-info="state.secondary"
       />
     </div>
   </div>
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index e7145ea4d..2d997131c 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -2,21 +2,21 @@
   <div :class="$style.body" ref="bodyRef">
     <user-icon
       :class="$style.userIcon"
-      :userId="state.message.userId"
+      :user-id="state.message.userId"
       :size="40"
     />
     <message-header
       :class="$style.messageHeader"
-      :userId="state.message.userId"
-      :createdAt="state.message.createdAt"
-      :updatedAt="state.message.updatedAt"
+      :user-id="state.message.userId"
+      :created-at="state.message.createdAt"
+      :updated-at="state.message.updatedAt"
     />
     <div :class="$style.messageContents">
       <div :class="['markdown-body', $style.content]" v-html="state.content" />
       <message-file-list
         v-if="state.fileIds.length > 0"
         :class="$style.messageFileList"
-        :fileIds="state.fileIds"
+        :file-ids="state.fileIds"
       />
     </div>
   </div>
diff --git a/src/components/Main/MainView/MessageElement/MessageFileList.vue b/src/components/Main/MainView/MessageElement/MessageFileList.vue
index ab0092d5e..edba43574 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileList.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileList.vue
@@ -4,7 +4,7 @@
       <message-file-list-image
         v-for="meta in fileMetaDataState.images"
         :key="meta.id"
-        :fileId="meta.id"
+        :file-id="meta.id"
         :is-large="showLargeImage"
         :class="$style.imageItem"
       />
@@ -12,13 +12,13 @@
     <message-file-list-video
       v-for="meta in fileMetaDataState.videos"
       :key="meta.id"
-      :fileId="meta.id"
+      :file-id="meta.id"
     />
     <message-file-list-file
       v-for="meta in fileMetaDataState.files"
       :key="meta.id"
       :class="$style.item"
-      :fileId="meta.id"
+      :file-id="meta.id"
     />
   </div>
 </template>
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
index 0f94802a2..820cd86b1 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListFile.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <message-file-list-item-content :fileId="fileId" />
+    <message-file-list-item-content :file-id="fileId" />
   </div>
 </template>
 
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
index c7e4e2e80..8bf3d20df 100644
--- a/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
+++ b/src/components/Main/MainView/MessageElement/MessageFileListVideo.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.container" :style="styles.container">
     <div :class="$style.overlay" :style="styles.overlay">
-      <message-file-list-item-content :fileId="fileId" is-white />
+      <message-file-list-item-content :file-id="fileId" is-white />
     </div>
     <video controls draggable="false" :alt="fileMeta.name" :src="fileRawPath" />
   </div>
diff --git a/src/components/Main/MainView/MessageElement/MessageHeader.vue b/src/components/Main/MainView/MessageElement/MessageHeader.vue
index 0b32a2d51..18a23ebcb 100644
--- a/src/components/Main/MainView/MessageElement/MessageHeader.vue
+++ b/src/components/Main/MainView/MessageElement/MessageHeader.vue
@@ -3,8 +3,8 @@
     <span :class="$style.displayName">{{ state.user.displayName }}</span>
     <grade-badge
       :class="$style.badge"
-      :userId="userId"
-      :isBot="state.user.bot"
+      :user-id="userId"
+      :is-bot="state.user.bot"
     />
     <span :class="$style.date" :style="styles.date">{{ state.date }}</span>
   </div>
diff --git a/src/components/Main/MainView/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller.vue
index 03d14c4ec..1994b1bc5 100644
--- a/src/components/Main/MainView/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller.vue
@@ -5,7 +5,7 @@
         :class="$style.element"
         v-for="messageId in messageIds"
         :key="messageId"
-        :messageId="messageId"
+        :message-id="messageId"
         @change-height="onChangeHeight"
       />
     </div>
diff --git a/src/components/Main/MainView/MessagesView.vue b/src/components/Main/MainView/MessagesView.vue
index 92907b1a3..eae5c5337 100644
--- a/src/components/Main/MainView/MessagesView.vue
+++ b/src/components/Main/MainView/MessagesView.vue
@@ -10,7 +10,7 @@
       v-if="fileDragDropState.isDragging"
       :class="$style.fileUploadOverlay"
     />
-    <messages-scroller :messageIds="state.channelMessageIds" />
+    <messages-scroller :message-ids="state.channelMessageIds" />
     <message-input :channel-id="state.channelId" />
   </div>
 </template>
diff --git a/src/components/Main/Modal/SettingModal/NavigationSelector.vue b/src/components/Main/Modal/SettingModal/NavigationSelector.vue
index 170619e77..2d394ad35 100644
--- a/src/components/Main/Modal/SettingModal/NavigationSelector.vue
+++ b/src/components/Main/Modal/SettingModal/NavigationSelector.vue
@@ -5,8 +5,8 @@
       v-for="item in items"
       :key="item.type"
       :type="item.type"
-      :iconName="item.iconName"
-      :iconMdi="item.iconMdi"
+      :icon-name="item.iconName"
+      :icon-mdi="item.iconMdi"
       :is-selected="currentNavigation === item.type"
       @click="onNavigationItemClick(item.type)"
     />
diff --git a/src/components/Main/Modal/SettingModal/SettingModal.vue b/src/components/Main/Modal/SettingModal/SettingModal.vue
index 9ee9f7b77..ebfd441c9 100644
--- a/src/components/Main/Modal/SettingModal/SettingModal.vue
+++ b/src/components/Main/Modal/SettingModal/SettingModal.vue
@@ -2,7 +2,7 @@
   <div :class="$style.container">
     <navigation-selector
       @navigation-change="onNavigationChange"
-      :currentNavigation="currentNavigation"
+      :current-navigation="currentNavigation"
     />
     <navigation-content :current-navigation="currentNavigation" />
     <close-button />
diff --git a/src/components/Main/Modal/UserModal/Feature/Buttons.vue b/src/components/Main/Modal/UserModal/Feature/Buttons.vue
index d738f1af9..1d09ab173 100644
--- a/src/components/Main/Modal/UserModal/Feature/Buttons.vue
+++ b/src/components/Main/Modal/UserModal/Feature/Buttons.vue
@@ -3,8 +3,8 @@
     <div @click="onDMClick" :style="{ display: 'inline-block' }">
       <link-button
         :title="`${showTitle ? 'DM' : ''}`"
-        iconName="email"
-        iconMdi
+        icon-name="email"
+        icon-mdi
       />
     </div>
     <div
@@ -14,8 +14,8 @@
     >
       <link-button
         :title="`${showTitle ? 'ホーム' : ''}`"
-        iconName="home"
-        iconMdi
+        icon-name="home"
+        icon-mdi
       />
     </div>
   </div>
diff --git a/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue b/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
index f60f2deed..6f6246dd4 100644
--- a/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
+++ b/src/components/Main/Modal/UserModal/Feature/DesktopFeature.vue
@@ -3,11 +3,11 @@
     <div>
       <h1>{{ user.displayName }}</h1>
       <p>
-        <online-indicator :userId="user.id" />
+        <online-indicator :user-id="user.id" />
         @{{ user.name }}
       </p>
     </div>
-    <buttons :username="user.name" :showTitle="true" />
+    <buttons :username="user.name" :show-title="true" />
   </section>
 </template>
 
diff --git a/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue b/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
index 41e13b202..c03a3d78b 100644
--- a/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
+++ b/src/components/Main/Modal/UserModal/Feature/MobileFeature.vue
@@ -1,8 +1,8 @@
 <template>
   <section :class="$style.feature">
     <user-icon
-      :userId="user.id"
-      :preventModal="true"
+      :user-id="user.id"
+      :prevent-modal="true"
       :size="64"
       :class="$style.icon"
       :style="styles.icon"
@@ -10,11 +10,11 @@
     <div :class="$style.name">
       <h1>{{ user.displayName }}</h1>
       <p>
-        <online-indicator :userId="user.id" />
+        <online-indicator :user-id="user.id" />
         @{{ user.name }}
       </p>
     </div>
-    <buttons :username="user.name" :showTitle="false" />
+    <buttons :username="user.name" :show-title="false" />
   </section>
 </template>
 
diff --git a/src/components/Main/Modal/UserModal/NavigationSelector.vue b/src/components/Main/Modal/UserModal/NavigationSelector.vue
index 7afdf2119..b84fd0993 100644
--- a/src/components/Main/Modal/UserModal/NavigationSelector.vue
+++ b/src/components/Main/Modal/UserModal/NavigationSelector.vue
@@ -7,8 +7,8 @@
       :class="$style.itemWrap"
     >
       <navigation-selector-item
-        :iconName="item.iconName"
-        :iconMdi="item.iconMdi"
+        :icon-name="item.iconName"
+        :icon-mdi="item.iconMdi"
         :is-selected="currentNavigation === item.type"
       />
     </div>
diff --git a/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue b/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
index 1abde6d39..0401638b7 100644
--- a/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
+++ b/src/components/Main/Modal/UserModal/ProfileTab/ProfileTab.vue
@@ -5,7 +5,7 @@
     <accounts
       :bot="user.bot"
       :name="user.name"
-      :twitterId="
+      :twitter-id="
         props.detail === undefined ? undefined : props.detail.twitterId
       "
     />
diff --git a/src/components/Main/Modal/UserModal/TagsTab.vue b/src/components/Main/Modal/UserModal/TagsTab.vue
index 6e3ac647d..48f6ede27 100644
--- a/src/components/Main/Modal/UserModal/TagsTab.vue
+++ b/src/components/Main/Modal/UserModal/TagsTab.vue
@@ -13,7 +13,7 @@
           {{ tag.tag }}
         </li>
       </ul>
-      <tags-tab-add :userId="propst.detail.id" />
+      <tags-tab-add :user-id="propst.detail.id" />
     </template>
   </div>
 </template>
diff --git a/src/components/Main/Modal/UserModal/UserModal.vue b/src/components/Main/Modal/UserModal/UserModal.vue
index ed762b4b6..958f04e8a 100644
--- a/src/components/Main/Modal/UserModal/UserModal.vue
+++ b/src/components/Main/Modal/UserModal/UserModal.vue
@@ -3,8 +3,8 @@
     <button :class="$style.close" @click="onClickClear">X</button>
     <user-icon
       v-if="!isMobile"
-      :userId="user.id"
-      :preventModal="true"
+      :user-id="user.id"
+      :prevent-modal="true"
       :size="iconSize"
       :class="$style.icon"
       :style="styles.icon"
@@ -13,7 +13,7 @@
       <feature :user="user" />
       <navigation-selector
         @navigation-change="onNavigationChange"
-        :currentNavigation="currentNavigation"
+        :current-navigation="currentNavigation"
       />
       <navigation-content
         :current-navigation="currentNavigation"
diff --git a/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue b/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
index 22ad6d93b..00404f720 100644
--- a/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
+++ b/src/components/Main/Navigation/NavigationContent/ActivityElementUserName.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" :style="styles.container">
-    <user-icon :class="$style.icon" :userId="user.id" :size="20" />
+    <user-icon :class="$style.icon" :user-id="user.id" :size="20" />
     <span>
       {{ user.displayName }}
     </span>
diff --git a/src/components/Main/Navigation/NavigationContent/UsersElement.vue b/src/components/Main/Navigation/NavigationContent/UsersElement.vue
index 84c163e33..494a32963 100644
--- a/src/components/Main/Navigation/NavigationContent/UsersElement.vue
+++ b/src/components/Main/Navigation/NavigationContent/UsersElement.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.container" :style="containerStyle">
-    <user-icon :class="$style.icon" :userId="user.id" :size="36" />
+    <user-icon :class="$style.icon" :user-id="user.id" :size="36" />
     <users-element-user-name :user="user" :class="$style.user" />
   </div>
 </template>
diff --git a/src/components/UI/Icon.vue b/src/components/UI/Icon.vue
index 18bd5a9ed..f89ba3b09 100644
--- a/src/components/UI/Icon.vue
+++ b/src/components/UI/Icon.vue
@@ -19,7 +19,7 @@
     :width="size"
     :height="size"
     :style="{ color: color }"
-    viewBox="0 0 24 24"
+    view-box="0 0 24 24"
     class="icon"
     v-bind="context.attrs"
     v-on="context.listeners"
diff --git a/src/views/Main.vue b/src/views/Main.vue
index efe56f3cc..a8e0645d6 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -16,7 +16,7 @@
         <navigation />
       </div>
       <div :class="$style.mainViewWrapper" :style="mainViewWrapperStyle">
-        <main-view-controller :isActive="isNavAppeared" />
+        <main-view-controller :is-active="isNavAppeared" />
       </div>
     </div>
     <modal-container />