From 183dee3983503cd7a969354d91a2b9b1bf579517 Mon Sep 17 00:00:00 2001
From: itt828 <iittt828@gmail.com>
Date: Thu, 25 Jul 2024 00:28:11 +0900
Subject: [PATCH] wip

---
 src/components/dashboard/DashboardItem.vue    |   6 +-
 .../dashboard/DashboardItemTitle.vue          |   6 +-
 src/components/dashboard/RoomList.vue         |  42 +-
 src/components/dashboard/RoomListItem.vue     |  18 +-
 src/components/dashboard/YourEvents.vue       |  56 ++-
 src/components/dashboard/YourGroups.vue       |  47 +--
 src/components/event/AttendanceForm.vue       |  46 +--
 src/components/event/AttendanceSelector.vue   |  78 ++--
 src/components/event/EventAttendeeItem.vue    |  25 +-
 src/components/event/EventAttendees.vue       | 191 +++++----
 src/components/event/EventFormBase.vue        | 382 +++++++++---------
 src/components/event/EventFormContent.vue     | 185 +++++----
 src/components/event/EventFormSummary.vue     | 186 ++++-----
 .../event/EventFormTimeAndPlace.vue           | 209 +++++-----
 .../event/EventFormTimeAndPlaceInstant.vue    | 117 +++---
 src/components/event/EventList.vue            |  49 +--
 src/components/event/EventListItem.vue        |  28 +-
 src/components/event/EventListToday.vue       |  37 +-
 src/components/event/EventPlace.vue           |  21 +-
 src/components/event/EventTagEditor.vue       |  46 +--
 src/components/shared/SummaryItem.vue         |   2 +-
 src/components/shared/SummaryItemCaption.vue  |   2 +-
 src/components/shared/SummaryItemMain.vue     |   2 +-
 src/components/shared/SummaryItemSubtext.vue  |   2 +-
 src/components/shared/SummaryItemText.vue     |   2 +-
 src/pages/EventDetail.vue                     | 240 +++++------
 src/workers/store.ts                          |   7 +
 27 files changed, 942 insertions(+), 1090 deletions(-)
 create mode 100644 src/workers/store.ts

diff --git a/src/components/dashboard/DashboardItem.vue b/src/components/dashboard/DashboardItem.vue
index 29985915..43766bdf 100644
--- a/src/components/dashboard/DashboardItem.vue
+++ b/src/components/dashboard/DashboardItem.vue
@@ -1,9 +1,7 @@
-<template functional>
+<template>
   <div class="mb-5">
     <slot />
   </div>
 </template>
 
-<script>
-export default { name: 'DashboardItem' }
-</script>
+<script setup lang="ts"></script>
diff --git a/src/components/dashboard/DashboardItemTitle.vue b/src/components/dashboard/DashboardItemTitle.vue
index 3b9006f6..e148b54f 100644
--- a/src/components/dashboard/DashboardItemTitle.vue
+++ b/src/components/dashboard/DashboardItemTitle.vue
@@ -1,9 +1,7 @@
-<template functional>
+<template>
   <h2 class="font-weight-regular">
     <slot />
   </h2>
 </template>
 
-<script>
-export default { name: 'DashboardItemTitle' }
-</script>
+<script setup lang="ts"></script>
diff --git a/src/components/dashboard/RoomList.vue b/src/components/dashboard/RoomList.vue
index 91926d1b..ea81aceb 100644
--- a/src/components/dashboard/RoomList.vue
+++ b/src/components/dashboard/RoomList.vue
@@ -13,35 +13,25 @@
   </v-row>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+<script setup lang="ts">
+import { ref } from 'vue'
 import RoomListItem from '@/components/dashboard/RoomListItem.vue'
 import { today, todayEnd } from '@/workers/date'
 import api, { ResponseRoom } from '@/api'
 
-@Component({
-  components: {
-    RoomListItem,
-  },
-})
-export default class RoomList extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  rooms: ResponseRoom[] = []
-
-  async created() {
-    this.status = 'loading'
-    try {
-      this.rooms = (
-        await api.rooms.getRooms({
-          dateBegin: today(),
-          dateEnd: todayEnd(),
-        })
-      ).filter(room => room.verified)
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const rooms = ref<ResponseRoom[]>([])
+;(async () => {
+  try {
+    ;(
+      await api.rooms.getRooms({
+        dateBegin: today(),
+        dateEnd: todayEnd(),
+      })
+    ).filter(room => room.verified)
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
-}
+})()
 </script>
diff --git a/src/components/dashboard/RoomListItem.vue b/src/components/dashboard/RoomListItem.vue
index 4603035a..a3ffd6ac 100644
--- a/src/components/dashboard/RoomListItem.vue
+++ b/src/components/dashboard/RoomListItem.vue
@@ -11,19 +11,13 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
-import { formatDate, TIME_DISPLAY_FORMAT } from '@/workers/date'
+<script setup lang="ts">
+import { formatDate as _formatDate, TIME_DISPLAY_FORMAT } from '@/workers/date'
 import { ResponseRoom } from '@/api'
 
-@Component
-export default class AssignedRoomDisplay extends Vue {
-  @Prop({ type: Object, required: true })
-  room!: ResponseRoom
+defineProps<{
+  room: ResponseRoom
+}>()
 
-  get formatDate() {
-    return formatDate(TIME_DISPLAY_FORMAT)
-  }
-}
+const formatDate = _formatDate(TIME_DISPLAY_FORMAT)
 </script>
diff --git a/src/components/dashboard/YourEvents.vue b/src/components/dashboard/YourEvents.vue
index 979df0c9..579b4d64 100644
--- a/src/components/dashboard/YourEvents.vue
+++ b/src/components/dashboard/YourEvents.vue
@@ -52,45 +52,39 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
-import { formatDate, today } from '@/workers/date'
+<script setup lang="ts">
+import { formatDate as _formatDate, today } from '@/workers/date'
 import api, { ResponseEvent, GetMyEventsRelationEnum } from '@/api'
+import { ref } from 'vue'
+import { useStore } from '@/workers/store'
 
 const uniqueBy = <T, S>(f: (x: T) => S, arr: T[]): T[] => {
   return [...new Map(arr.map(x => [f(x), x])).values()]
 }
+const store = useStore()
 
-@Component
-export default class YourEvents extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  events: ResponseEvent[] = []
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const events = ref<ResponseEvent[]>([])
 
-  async created() {
-    this.status = 'loading'
-    try {
-      const [adminEvents, belongingEvents] = await Promise.all([
-        api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Admins }),
-        api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Belongs }),
-      ])
-      this.events = uniqueBy(
-        event => event.eventId,
-        [...adminEvents, ...belongingEvents]
-      ).filter(event => today() <= event.timeStart)
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
+;(async () => {
+  status.value = 'loading'
+  try {
+    const [adminEvents, belongingEvents] = await Promise.all([
+      api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Admins }),
+      api.events.getMyEvents({ relation: GetMyEventsRelationEnum.Belongs }),
+    ])
+    events.value = uniqueBy(
+      event => event.eventId,
+      [...adminEvents, ...belongingEvents]
+    ).filter(event => today() <= event.timeStart)
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
+})()
 
-  get includesMe() {
-    return (memberIds: string[]) =>
-      memberIds.includes(this.$store.direct.state.me?.userId ?? '')
-  }
+const includesMe = (memberIds: string[]) =>
+  memberIds.includes(store.direct.state.me?.userId ?? '')
 
-  get formatDate() {
-    return formatDate('MM/DD')
-  }
-}
+const formatDate = _formatDate('MM/DD')
 </script>
diff --git a/src/components/dashboard/YourGroups.vue b/src/components/dashboard/YourGroups.vue
index be4e5b2c..01797989 100644
--- a/src/components/dashboard/YourGroups.vue
+++ b/src/components/dashboard/YourGroups.vue
@@ -49,35 +49,32 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+<script setup lang="ts">
+import { ref } from 'vue'
 import api, { ResponseGroup } from '@/api'
+import { useStore } from '@/workers/store'
 
-@Component
-export default class YourGroups extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  groups: ResponseGroup[] = []
+const store = useStore()
 
-  async created() {
-    this.status = 'loading'
-    try {
-      await this.fetchGroups()
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
-  }
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const groups = ref<ResponseGroup[]>([])
 
-  async fetchGroups() {
-    this.groups = (await api.groups.getGroups()).filter(group =>
-      this.includesMe([...group.members, ...group.admins])
-    )
-  }
+const fetchGroups = async () => {
+  groups.value = (await api.groups.getGroups()).filter(group =>
+    includesMe([...group.members, ...group.admins])
+  )
+}
 
-  get includesMe() {
-    return (memberIds: string[]) =>
-      memberIds.includes(this.$store.direct.state.me?.userId ?? '')
+const includesMe = (memberIds: string[]) =>
+  memberIds.includes(store.direct.state.me?.userId ?? '')
+
+;(async () => {
+  status.value = 'loading'
+  try {
+    await fetchGroups()
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
-}
+})()
 </script>
diff --git a/src/components/event/AttendanceForm.vue b/src/components/event/AttendanceForm.vue
index c73d9393..9dd7b9cc 100644
--- a/src/components/event/AttendanceForm.vue
+++ b/src/components/event/AttendanceForm.vue
@@ -23,40 +23,40 @@
           >
             出席する
           </v-btn>
-          <attendance-selector v-else v-model="attendance" />
+          <attendance-selector
+            v-else
+            :attendance="attendance"
+            @change="v => emits('change', v)"
+          />
         </v-col>
       </v-row>
     </v-card-actions>
   </v-sheet>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, ModelSync } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import AttendanceSelector from '@/components/event/AttendanceSelector.vue'
 import UserAvatar from '@/components/shared/UserAvatar.vue'
-import { RequestScheduleScheduleEnum, ResponseUser } from '@/api'
+import { RequestScheduleScheduleEnum } from '@/api'
+import { useStore } from '@/workers/store'
 
-@Component({
-  components: {
-    AttendanceSelector,
-    UserAvatar,
-  },
-})
-export default class AttendanceForm extends Vue {
-  @ModelSync('value', 'change', { required: true })
-  attendance!: RequestScheduleScheduleEnum | null
+const store = useStore()
 
-  get shouldPostAttendance(): boolean {
-    return this.attendance === RequestScheduleScheduleEnum.Pending
-  }
+const props = defineProps<{
+  attendance: RequestScheduleScheduleEnum | null
+}>()
+const emits = defineEmits<{
+  (e: 'change', value: RequestScheduleScheduleEnum): void
+}>()
 
-  setAttend(): void {
-    this.attendance = RequestScheduleScheduleEnum.Attendance
-  }
+const shouldPostAttendance = computed(
+  () => props.attendance === RequestScheduleScheduleEnum.Pending
+)
 
-  get me(): ResponseUser {
-    return this.$store.direct.state.me!
-  }
+const setAttend = () => {
+  emits('change', RequestScheduleScheduleEnum.Attendance)
 }
+
+const me = store.direct.state.me!
 </script>
diff --git a/src/components/event/AttendanceSelector.vue b/src/components/event/AttendanceSelector.vue
index 9d6706f2..f5d01f82 100644
--- a/src/components/event/AttendanceSelector.vue
+++ b/src/components/event/AttendanceSelector.vue
@@ -2,7 +2,6 @@
   <v-select
     v-model="attendance"
     :items="items"
-    :value="attendance"
     solo
     flat
     :background-color="backgroundOf(attendance)"
@@ -21,47 +20,52 @@
   </v-select>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { RequestScheduleScheduleEnum } from '@/api'
-import Vue from 'vue'
-import { Component, ModelSync } from 'vue-property-decorator'
+import { computed } from 'vue'
 
-@Component
-export default class AttendanceSelector extends Vue {
-  @ModelSync('value', 'update', { type: String, required: true })
-  attendance!: RequestScheduleScheduleEnum
+const props = defineProps<{
+  attendance: RequestScheduleScheduleEnum
+}>()
+const emits = defineEmits<{
+  (e: 'change', value: string)
+}>()
 
-  items: { text: string; value: RequestScheduleScheduleEnum }[] = [
-    {
-      text: '未定',
-      value: RequestScheduleScheduleEnum.Pending,
-    },
-    {
-      text: '欠席予定',
-      value: RequestScheduleScheduleEnum.Absent,
-    },
-    {
-      text: '出席予定',
-      value: RequestScheduleScheduleEnum.Attendance,
-    },
-  ]
+const attendance = computed({
+  get: () => props.attendance,
+  set: (v: string) => {
+    emits('change', v)
+  },
+})
 
-  foregroundOf(attendance: RequestScheduleScheduleEnum): string {
-    return {
-      [RequestScheduleScheduleEnum.Pending]: 'blue-grey--text text--darken-1',
-      [RequestScheduleScheduleEnum.Absent]: 'white--text',
-      [RequestScheduleScheduleEnum.Attendance]: 'white--text',
-    }[attendance]
-  }
+const items: { text: string; value: RequestScheduleScheduleEnum }[] = [
+  {
+    text: '未定',
+    value: RequestScheduleScheduleEnum.Pending,
+  },
+  {
+    text: '欠席予定',
+    value: RequestScheduleScheduleEnum.Absent,
+  },
+  {
+    text: '出席予定',
+    value: RequestScheduleScheduleEnum.Attendance,
+  },
+]
 
-  backgroundOf(attendance: RequestScheduleScheduleEnum): string {
-    return {
-      [RequestScheduleScheduleEnum.Pending]: '#ced6d7',
-      [RequestScheduleScheduleEnum.Absent]: '#d3664f',
-      [RequestScheduleScheduleEnum.Attendance]: 'primary',
-    }[attendance]
-  }
-}
+const foregroundOf = (attendance: RequestScheduleScheduleEnum) =>
+  ({
+    [RequestScheduleScheduleEnum.Pending]: 'blue-grey--text text--darken-1',
+    [RequestScheduleScheduleEnum.Absent]: 'white--text',
+    [RequestScheduleScheduleEnum.Attendance]: 'white--text',
+  }[attendance])
+
+const backgroundOf = (attendance: RequestScheduleScheduleEnum) =>
+  ({
+    [RequestScheduleScheduleEnum.Pending]: '#ced6d7',
+    [RequestScheduleScheduleEnum.Absent]: '#d3664f',
+    [RequestScheduleScheduleEnum.Attendance]: 'primary',
+  }[attendance])
 </script>
 
 <style lang="scss">
diff --git a/src/components/event/EventAttendeeItem.vue b/src/components/event/EventAttendeeItem.vue
index f4448e45..a3f989c6 100644
--- a/src/components/event/EventAttendeeItem.vue
+++ b/src/components/event/EventAttendeeItem.vue
@@ -44,24 +44,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+<script setup lang="ts">
 import UserAvatar from '@/components/shared/UserAvatar.vue'
 
-@Component({
-  components: {
-    UserAvatar,
-  },
-})
-export default class EventAttendeeItem extends Vue {
-  @Prop({ type: String, required: true })
-  name!: string
-  @Prop({ type: String, required: true })
-  icon!: string
-  @Prop({ type: String, required: true })
-  state!: string
-  @Prop({ type: Boolean, required: true })
-  isAdmin!: boolean
-}
+defineProps<{
+  name?: string
+  icon?: string
+  state: string
+  isAdmin: boolean
+}>()
 </script>
diff --git a/src/components/event/EventAttendees.vue b/src/components/event/EventAttendees.vue
index af7a39e9..ed322a6c 100644
--- a/src/components/event/EventAttendees.vue
+++ b/src/components/event/EventAttendees.vue
@@ -15,113 +15,104 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop, Watch } from 'vue-property-decorator'
-import UserAvatar from '@/components/shared/UserAvatar.vue'
-import {
-  ResponseEvent,
-  ResponseEventAttendees,
-  ResponseEventAttendeesScheduleEnum,
-} from '@/api'
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ResponseEventDetail, ResponseEventAttendeesScheduleEnum } from '@/api'
 import EventAttendeeItem from '@/components/event/EventAttendeeItem.vue'
+import { useStore } from '@/workers/store'
 
-@Component({
-  components: {
-    UserAvatar,
-    EventAttendeeItem,
-  },
+const store = useStore()
+
+const props = defineProps<{
+  event: ResponseEventDetail
+  attendeesPerPage: number
+}>()
+
+const attendanceCount = ref(0)
+const pendingCount = ref(0)
+const absentCount = ref(0)
+const page = ref(1)
+
+const attendees = computed(() => props.event.attendees)
+
+const validAttendees = computed(() => {
+  const _attendees = [...attendees.value]
+  return _attendees.filter(
+    attendee =>
+      store.direct.state.usersCache.users?.get(attendee.userId!) !== undefined
+  )
 })
-export default class EventAttendees extends Vue {
-  @Prop({ type: Object, required: true })
-  event!: ResponseEvent
-  @Prop({ type: Number, required: true })
-  attendeesPerPage!: number
 
-  attendanceCount: number = 0
-  pendingCount: number = 0
-  absentCount: number = 0
-  page: number = 1
+const updateCounts = computed(async () => {
+  let _attendanceCount: number = 0
+  let _pendingCount: number = 0
+  let _absentCount: number = 0
+  validAttendees.value.forEach(item => {
+    if (item.schedule === ResponseEventAttendeesScheduleEnum.Attendance)
+      _attendanceCount += 1
+    if (item.schedule === ResponseEventAttendeesScheduleEnum.Absent)
+      _absentCount += 1
+    if (item.schedule === ResponseEventAttendeesScheduleEnum.Pending)
+      _pendingCount += 1
+  })
+  attendanceCount.value = _attendanceCount
+  pendingCount.value = _pendingCount
+  absentCount.value = _absentCount
+})
 
-  get attendees(): ResponseEventAttendees[] {
-    return this.event.attendees
-  }
+const sortedAttendees = computed(() => {
+  const _attendees = [...validAttendees.value]
+  _attendees.sort((a, b) => {
+    const isAAdmin: boolean = isAdmin.value(a.userId)
+    const isBAdmin: boolean = isAdmin.value(b.userId)
+    if (isAAdmin === isBAdmin) {
+      return 0
+    } else if (isAAdmin) {
+      return -1
+    } else {
+      return 1
+    }
+  })
+  _attendees.sort((a, b) => {
+    if (a.schedule === b.schedule) {
+      return 0
+    } else if (
+      a.schedule === ResponseEventAttendeesScheduleEnum.Attendance ||
+      b.schedule === ResponseEventAttendeesScheduleEnum.Pending
+    ) {
+      return -1
+    } else {
+      return 1
+    }
+  })
+  return _attendees
+})
 
-  @Watch('attendees', { deep: true, immediate: true })
-  async updateCounts() {
-    let _attendanceCount: number = 0
-    let _pendingCount: number = 0
-    let _absentCount: number = 0
-    this.validAttendees.forEach(item => {
-      if (item.schedule === ResponseEventAttendeesScheduleEnum.Attendance)
-        _attendanceCount += 1
-      if (item.schedule === ResponseEventAttendeesScheduleEnum.Absent)
-        _absentCount += 1
-      if (item.schedule === ResponseEventAttendeesScheduleEnum.Pending)
-        _pendingCount += 1
-    })
-    this.attendanceCount = _attendanceCount
-    this.pendingCount = _pendingCount
-    this.absentCount = _absentCount
-  }
+const isAdmin = computed(
+  () => (userId: string) => props.event.admins.includes(userId)
+)
+const getName = computed(
+  () => (userId: string) =>
+    store.direct.state.usersCache.users?.get(userId)?.name
+)
 
-  get validAttendees() {
-    const _attendees = [...this.attendees]
-    return _attendees.filter(
-      attendee =>
-        this.$store.direct.state.usersCache.users?.get(attendee.userId!) !==
-        undefined
-    )
-  }
-  get sortedAttendees() {
-    const _attendees = [...this.validAttendees]
-    _attendees.sort((a, b) => {
-      const isAAdmin: boolean = this.isAdmin(a.userId)
-      const isBAdmin: boolean = this.isAdmin(b.userId)
-      if (isAAdmin === isBAdmin) {
-        return 0
-      } else if (isAAdmin) {
-        return -1
-      } else {
-        return 1
-      }
-    })
-    _attendees.sort((a, b) => {
-      if (a.schedule === b.schedule) {
-        return 0
-      } else if (
-        a.schedule === ResponseEventAttendeesScheduleEnum.Attendance ||
-        b.schedule === ResponseEventAttendeesScheduleEnum.Pending
-      ) {
-        return -1
-      } else {
-        return 1
-      }
-    })
-    return _attendees
-  }
-  isAdmin(userId: string): boolean {
-    return this.event.admins.includes(userId)
-  }
-  getName(userId: string): string | undefined {
-    return this.$store.direct.state.usersCache.users?.get(userId)?.name
-  }
+const getUserIcon = computed(
+  () => (userId: string) =>
+    store.direct.state.usersCache.users?.get(userId)?.icon
+)
+const pageLength = computed(() =>
+  Math.ceil(validAttendees.value.length / props.attendeesPerPage)
+)
 
-  getUserIcon(userId: string): string | undefined {
-    return this.$store.direct.state.usersCache.users?.get(userId)?.icon
-  }
-  get pageLength(): number {
-    return Math.ceil(this.validAttendees.length / this.attendeesPerPage)
-  }
-  get counts(): string {
-    return `参加: ${this.attendanceCount}人, 欠席: ${this.absentCount}人, 未定: ${this.pendingCount}人`
-  }
+const counts = computed(
+  () =>
+    `参加: ${attendanceCount.value}人, 欠席: ${absentCount.value}人, 未定: ${pendingCount.value}人`
+)
 
-  get attendeesSlice(): ResponseEventAttendees[] {
-    return this.sortedAttendees.slice(
-      (this.page - 1) * this.attendeesPerPage,
-      this.page * this.attendeesPerPage
-    )
-  }
-}
+const attendeesSlice = computed(() =>
+  sortedAttendees.value.slice(
+    (page.value - 1) * props.attendeesPerPage,
+    page.value * props.attendeesPerPage
+  )
+)
 </script>
diff --git a/src/components/event/EventFormBase.vue b/src/components/event/EventFormBase.vue
index 9dcfa34c..e42d154a 100644
--- a/src/components/event/EventFormBase.vue
+++ b/src/components/event/EventFormBase.vue
@@ -16,7 +16,12 @@
 
     <v-stepper-items class="pb-1">
       <v-stepper-content step="1">
-        <event-form-content v-model="validContent" v-bind.sync="content" />
+        <event-form-content
+          :content="content"
+          @update:content="v => (content = v)"
+          :isValid="validContent"
+          @update:isValid="updateValidContent"
+        />
         <form-next-button :disabled="!validContent" @click="step = 2">
           Continue
         </form-next-button>
@@ -28,14 +33,20 @@
           <v-tab>その他で開催</v-tab>
           <v-tab-item class="pt-3">
             <event-form-time-and-place
-              v-model="validTimeAndPlaceDefault"
-              v-bind.sync="timeAndPlace"
+              :value="validTimeAndPlaceDefault"
+              @update:value="v => (validTimeAndPlaceDefault = v)"
+              :eventInputTimeAndPlace="timeAndPlace"
+              @update:eventInputTimeAndPlace="v => (timeAndPlace = v)"
             />
           </v-tab-item>
           <v-tab-item class="pt-3">
             <event-form-time-and-place-instant
-              v-model="validTimeAndPlacePersonal"
-              v-bind.sync="timeAndPlaceInstant"
+              :value="validTimeAndPlacePersonal"
+              @update:value="v => (validTimeAndPlacePersonal = v)"
+              :eventInputTimeAndPlaceInstant="timeAndPlaceInstant"
+              @update:eventInputTimeAndPlaceInstant="
+                v => (timeAndPlaceInstant = v)
+              "
             />
           </v-tab-item>
         </v-tabs>
@@ -46,7 +57,12 @@
       </v-stepper-content>
 
       <v-stepper-content step="3">
-        <event-form-summary v-bind="{ ...summary, content, isEdit: isEdit }" />
+        <event-form-summary
+          v-if="summary"
+          :eventSummary="summary"
+          :content="content"
+          :isEdit="isEdit"
+        />
         <form-back-button class="mr-2" @click="step = 2">
           Back
         </form-back-button>
@@ -58,9 +74,8 @@
   </v-stepper>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop, Emit } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import EventFormContent, {
   EventInputContent,
 } from '@/components/event/EventFormContent.vue'
@@ -78,7 +93,8 @@ import FormBackButton from '@/components/shared/FormBackButton.vue'
 import { useDraftConfirmer } from '@/workers/draftConfirmer'
 import { removeDraftConfirmer } from '@/workers/draftConfirmer'
 import router from '@/router'
-import { Route } from 'vue-router'
+import { useStore } from '@/workers/store'
+import { useRoute } from 'vue-router/composables'
 
 export type EventInput = EventInputContent &
   (
@@ -97,225 +113,201 @@ enum TimeAndPlaceFormTab {
   Personal = 1,
 }
 
-@Component({
-  components: {
-    EventFormContent,
-    EventFormTimeAndPlace,
-    EventFormTimeAndPlaceInstant,
-    EventFormSummary,
-    FormNextButton,
-    FormBackButton,
-  },
+const store = useStore()
+const route = useRoute()
+
+const props = defineProps<{
+  isEdit: boolean
+  event?: EventInput | undefined
+}>()
+
+const emits = defineEmits<{
+  (e: 'submit', output: EventOutput): void
+}>()
+
+const content = ref<EventInputContent>({
+  name: props.event?.name ?? '',
+  description: props.event?.description ?? '',
+  group: props.event?.group ?? null,
+  open: props.event?.open ?? false,
+  tags: props.event?.tags ?? [],
+  admins:
+    props.event?.admins ??
+    (store.direct.state.me ? [store.direct.state.me] : []),
 })
-export default class EventFormBase extends Vue {
-  @Prop({ type: Boolean, required: true })
-  isEdit!: boolean
-
-  @Prop({ type: Object })
-  event!: EventInput | null | undefined
-
-  content: EventInputContent = null!
-
-  timeAndPlace: EventInputTimeAndPlace = null!
-
-  timeAndPlaceInstant: EventInputTimeAndPlaceInstant = null!
-
-  instant: boolean = null!
-
-  originalSummary: EventSummary = null!
 
-  beforeEachControl: (() => void) | null = null
+const timeAndPlace = ref<EventInputTimeAndPlace>({
+  timeStart:
+    props.event && !props.event.instant ? props.event.timeStart ?? '' : '',
+  timeEnd: props.event && !props.event.instant ? props.event.timeEnd ?? '' : '',
+  room: props.event && !props.event.instant ? props.event.room ?? null : null,
+  sharedRoom:
+    props.event && !props.event.instant ? props.event.sharedRoom ?? true : true,
+})
+const timeAndPlaceInstant = ref<EventInputTimeAndPlaceInstant>({
+  timeStart: props.event?.instant ? props.event.timeStart ?? '' : '',
+  timeEnd: props.event?.instant ? props.event.timeEnd ?? '' : '',
+  place: props.event?.instant ? props.event.place ?? '' : '',
+})
+const instant = ref<boolean>(props.event?.instant ?? false)
+const originalSummary = ref<EventSummary | null>(null)
+const step = ref(1)
 
-  created() {
-    this.content = {
-      name: this.event?.name ?? '',
-      description: this.event?.description ?? '',
-      group: this.event?.group ?? null,
-      open: this.event?.open ?? false,
-      tags: this.event?.tags ?? [],
-      admins:
-        this.event?.admins ??
-        (this.$store.direct.state.me ? [this.$store.direct.state.me] : []),
-    }
-    this.timeAndPlace = {
-      timeStart:
-        this.event && !this.event.instant ? this.event.timeStart ?? '' : '',
-      timeEnd:
-        this.event && !this.event.instant ? this.event.timeEnd ?? '' : '',
-      room: this.event && !this.event.instant ? this.event.room ?? null : null,
-      sharedRoom:
-        this.event && !this.event.instant
-          ? this.event.sharedRoom ?? true
-          : true,
-    }
-    this.timeAndPlaceInstant = {
-      timeStart: this.event?.instant ? this.event.timeStart ?? '' : '',
-      timeEnd: this.event?.instant ? this.event.timeEnd ?? '' : '',
-      place: this.event?.instant ? this.event.place ?? '' : '',
-    }
-    this.instant = this.event?.instant ?? false
-  }
+const beforeEachControl = ref<(() => void) | null>(null)
 
-  step = 1
+const tab = computed({
+  get: () =>
+    instant.value ? TimeAndPlaceFormTab.Personal : TimeAndPlaceFormTab.Default,
 
-  get tab(): number {
-    return this.instant
-      ? TimeAndPlaceFormTab.Personal
-      : TimeAndPlaceFormTab.Default
-  }
-  set tab(t: number) {
+  set: (t: number) => {
     switch (t) {
       case TimeAndPlaceFormTab.Default:
-        this.instant = false
+        instant.value = false
         break
       case TimeAndPlaceFormTab.Personal:
-        this.instant = true
+        instant.value = true
         break
     }
-  }
+  },
+})
 
-  get valid(): boolean {
-    return this.validContent && this.validTimeAndPlace
+const valid = computed(() => validContent.value && validTimeAndPlace.value)
+const validContent = ref(false)
+const updateValidContent = (newValue: boolean) =>
+  (validContent.value = newValue)
+const validTimeAndPlaceDefault = ref(false)
+const validTimeAndPlacePersonal = ref(false)
+const validTimeAndPlace = computed(
+  () =>
+    (!instant.value && validTimeAndPlaceDefault.value) ||
+    (instant.value && validTimeAndPlacePersonal.value)
+)
+const summary = computed<EventSummary | null>(() => {
+  if (
+    !content.value ||
+    instant.value === null ||
+    !timeAndPlace.value ||
+    !timeAndPlaceInstant.value
+  )
+    return null
+  return {
+    name: content.value.name,
+    description: content.value.description,
+    tags: content.value.tags,
+    groupName: content.value.group?.name ?? '',
+    open: content.value.open,
+    place: instant.value
+      ? timeAndPlaceInstant.value?.place
+      : timeAndPlace.value.room?.place ?? '',
+    isPrivate: instant.value,
+    sharedRoom: instant.value ? false : timeAndPlace.value.sharedRoom,
+    timeStart: instant.value
+      ? timeAndPlaceInstant.value.timeStart
+      : timeAndPlace.value.timeStart,
+    timeEnd: instant.value
+      ? timeAndPlaceInstant.value.timeEnd
+      : timeAndPlace.value.timeEnd,
   }
-  validContent = false
-  validTimeAndPlaceDefault = false
-  validTimeAndPlacePersonal = false
-  get validTimeAndPlace(): boolean {
+})
+
+const isChanged = computed(() => {
+  if (summary.value && originalSummary.value) {
     return (
-      (!this.instant && this.validTimeAndPlaceDefault) ||
-      (this.instant && this.validTimeAndPlacePersonal)
+      JSON.stringify(summary.value) !== JSON.stringify(originalSummary.value)
     )
   }
+  return false
+})
 
-  get summary(): EventSummary {
-    return {
-      name: this.content.name,
-      description: this.content.description,
-      tags: this.content.tags,
-      groupName: this.content.group?.name ?? '',
-      open: this.content.open,
-      place: this.instant
-        ? this.timeAndPlaceInstant.place
-        : this.timeAndPlace.room?.place ?? '',
-      isPrivate: this.instant,
-      sharedRoom: this.instant ? false : this.timeAndPlace.sharedRoom,
-      timeStart: this.instant
-        ? this.timeAndPlaceInstant.timeStart
-        : this.timeAndPlace.timeStart,
-      timeEnd: this.instant
-        ? this.timeAndPlaceInstant.timeEnd
-        : this.timeAndPlace.timeEnd,
-    }
-  }
+const cleanupContent = () => {
+  if (!summary.value) return
+  summary.value.name = ''
+  summary.value.description = ''
+  summary.value.tags = []
+  summary.value.groupName = ''
+  summary.value.place = ''
+  summary.value.timeStart = ''
+  summary.value.timeEnd = ''
+  summary.value.open = false
+  summary.value.sharedRoom = true
+}
 
-  isChanged(): boolean {
-    if (this.summary && this.originalSummary) {
-      return (
-        JSON.stringify(this.summary) !== JSON.stringify(this.originalSummary)
-      )
-    }
-    return false
-  }
+const isEventNewOrEdit = () => route.name === 'EventNew'
 
-  cleanupContent(): void {
-    this.summary.name = ''
-    this.summary.description = ''
-    this.summary.tags = []
-    this.summary.groupName = ''
-    this.summary.place = ''
-    this.summary.timeStart = ''
-    this.summary.timeEnd = ''
-    this.summary.open = false
-    this.summary.sharedRoom = true
+const beforLeaveGuardinEventEdit = (to, from, next) => {
+  if (from.name !== 'EventEdit') {
+    return next()
   }
 
-  isEventNewOrEdit(): boolean {
-    const currentRoute: Route = this.$route
-    return currentRoute.name === 'EventNew'
+  if (!isChanged.value) {
+    return next()
   }
 
-  beforLeaveGuardinEventEdit = (to, from, next) => {
-    if (from.name !== 'EventEdit') {
-      return next()
-    }
-
-    if (!this.isChanged()) {
-      return next()
-    }
+  if (
+    confirm(
+      '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+    )
+  ) {
+    removeDraftConfirmer()
+    cleanupContent()
+    return next()
+  }
 
-    if (
-      confirm(
-        '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
-      )
-    ) {
-      removeDraftConfirmer()
-      this.cleanupContent()
-      return next()
-    }
+  return next(false)
+}
 
-    return next(false)
+const beforLeaveGuardinEventNew = (to, from, next) => {
+  if (from.name !== 'EventNew' || !isChanged.value) {
+    return next()
   }
 
-  beforLeaveGuardinEventNew = (to, from, next) => {
-    if (from.name !== 'EventNew' || !this.isChanged()) {
-      return next()
-    }
+  if (
+    confirm(
+      '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
+    )
+  ) {
+    removeDraftConfirmer()
+    cleanupContent()
+    return next()
+  }
 
-    if (
-      confirm(
-        '入力されたデータは送信されないまま破棄されますが，よろしいですか。'
-      )
-    ) {
-      removeDraftConfirmer()
-      this.cleanupContent()
-      return next()
-    }
+  return next(false)
+}
 
-    return next(false)
+watch(summary, () => {
+  if (isChanged.value) {
+    useDraftConfirmer()
+  } else {
+    removeDraftConfirmer()
   }
-
-  mounted() {
-    this.$watch(
-      'summary',
-      () => {
-        if (this.isChanged()) {
-          useDraftConfirmer()
-        } else {
-          removeDraftConfirmer()
-        }
-      },
-      { deep: true }
-    )
-    if (this.isEventNewOrEdit()) {
-      this.beforeEachControl = router.beforeEach(this.beforLeaveGuardinEventNew)
-    } else {
-      this.beforeEachControl = router.beforeEach(
-        this.beforLeaveGuardinEventEdit
-      )
-    }
-    this.originalSummary = JSON.parse(JSON.stringify(this.summary))
+})
+onMounted(() => {
+  if (isEventNewOrEdit()) {
+    beforeEachControl.value = router.beforeEach(beforLeaveGuardinEventNew)
+  } else {
+    beforeEachControl.value = router.beforeEach(beforLeaveGuardinEventEdit)
   }
+  originalSummary.value = JSON.parse(JSON.stringify(summary.value))
+})
 
-  beforeDestroy() {
-    if (this.beforeEachControl) {
-      this.beforeEachControl()
-    }
+onBeforeUnmount(() => {
+  if (beforeEachControl.value) {
+    beforeEachControl.value()
   }
+})
 
-  @Emit()
-  submit(): EventOutput {
-    removeDraftConfirmer()
-    this.cleanupContent()
-    if (this.beforeEachControl) {
-      this.beforeEachControl()
-    }
-    return {
-      ...this.content,
-      group: this.content.group!,
-      ...(this.instant
-        ? { instant: true, ...this.timeAndPlaceInstant }
-        : { instant: false, ...this.timeAndPlace }),
-    }
+const submit = () => {
+  removeDraftConfirmer()
+  cleanupContent()
+  if (beforeEachControl.value) {
+    beforeEachControl.value()
   }
+  emits('submit', {
+    ...content.value,
+    group: content.value.group,
+    ...(instant.value
+      ? { instant: true, ...timeAndPlaceInstant.value }
+      : { instant: false, ...timeAndPlace.value }),
+  })
 }
 </script>
diff --git a/src/components/event/EventFormContent.vue b/src/components/event/EventFormContent.vue
index 9e87a428..d004b7e0 100644
--- a/src/components/event/EventFormContent.vue
+++ b/src/components/event/EventFormContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-form v-model="valid">
+  <v-form v-model="isValidRef">
     <div class="mb-4 text--secondary caption">
       <span class="mr-1"> ※イベントを作るには主催するグループが必要です </span>
       <router-link to="/groups/new"> 新しくグループを作る </router-link>
@@ -81,9 +81,8 @@
   </v-form>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop, PropSync } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import EventTag from '@/components/shared/EventTag.vue'
 import UserAvatar from '@/components/shared/UserAvatar.vue'
 import Autocomplete from '@/components/shared/Autocomplete.vue'
@@ -91,9 +90,9 @@ import { rmCtrlChar } from '@/workers/rmCtrlChar'
 import api, {
   ResponseGroup,
   ResponseUser,
-  RequestEventInstantTags,
   GetMyGroupsRelationEnum,
 } from '@/api'
+import { useStore } from '@/workers/store'
 
 export type EventInputContent = {
   name: string
@@ -104,102 +103,112 @@ export type EventInputContent = {
   admins: ResponseUser[]
 }
 
-@Component({
-  components: {
-    EventTag,
-    UserAvatar,
-    Autocomplete,
-  },
-})
-export default class EventFormContent extends Vue {
-  @Prop({ type: Boolean, required: true })
-  value!: boolean
+const store = useStore()
 
-  @PropSync('name', { type: String, required: true })
-  nameInput!: string
+const props = defineProps<{
+  isValid: boolean
+  content: EventInputContent
+}>()
 
-  @PropSync('group', {
-    validator: prop => typeof prop === 'object' || prop === null,
-    required: true,
-  })
-  groupInput!: ResponseGroup | null
+const emits = defineEmits<{
+  (e: 'update:isValid', value: boolean): void
+  (e: 'update:content', value: EventInputContent): void
+}>()
 
-  @PropSync('open', { type: Boolean, required: true })
-  openInput!: boolean
+const nameInput = computed({
+  get: () => props.content.name,
+  set: (v: string) => emits('update:content', { ...props.content, name: v }),
+})
 
-  @PropSync('admins', { type: Array, required: true })
-  adminsInput!: ResponseUser[]
+const groupInput = computed({
+  get: () => props.content.group,
+  set: (v: ResponseGroup | null) =>
+    emits('update:content', { ...props.content, group: v }),
+})
 
-  @PropSync('tags', { type: Array, required: true })
-  tagsInput!: { name: string }[]
+const openInput = computed({
+  get: () => props.content.open,
+  set: (v: boolean) => emits('update:content', { ...props.content, open: v }),
+})
 
-  @PropSync('description', { type: String, required: true })
-  descriptionInput!: string
+const adminsInput = computed({
+  get: () => props.content.admins,
+  set: (v: ResponseUser[]) =>
+    emits('update:content', { ...props.content, admins: v }),
+})
 
-  allGroups: ResponseGroup[] = []
-  allTags: string[] = []
+const tagsInput = computed({
+  get: () => props.content.tags,
+  set: (v: { name: string }[]) =>
+    emits('update:content', { ...props.content, tags: v }),
+})
 
-  created() {
-    Promise.all([this.fetchGroups(), this.fetchTags()])
-  }
-  sortGroups = (
-    a: ResponseGroup,
-    b: ResponseGroup,
-    currentUser: ResponseUser
-  ) => {
-    const adminA = a.admins.includes(currentUser.userId) ? -1 : 1
-    const adminB = b.admins.includes(currentUser.userId) ? -1 : 1
-    if (adminA !== adminB) {
-      return adminA - adminB
-    } else {
-      return a.name.localeCompare(b.name)
-    }
-  }
-  async fetchGroups() {
-    const [groups, groupIds] = await Promise.all([
-      api.groups.getGroups(),
-      api.groups.getMyGroups({ relation: GetMyGroupsRelationEnum.Belongs }),
-    ])
-    const currentUser = this.$store.direct.state.me!
-    if (!currentUser) {
-      return
-    }
-    this.allGroups = groups
-      .sort((a, b) => this.sortGroups(a, b, currentUser))
-      .filter(group => groupIds.includes(group.groupId))
-  }
-  async fetchTags() {
-    this.allTags = (await api.tags.getTag()).map(({ name }) => name)
-  }
+const descriptionInput = computed({
+  get: () => props.content.description,
+  set: (v: string) =>
+    emits('update:content', { ...props.content, description: v }),
+})
 
-  private get valid(): boolean {
-    return this.value
-  }
-  private set valid(value: boolean) {
-    this.$emit('input', value)
-  }
+const isValidRef = computed({
+  get: () => props.isValid,
+  set: (newValue: boolean) => emits('update:isValid', newValue),
+})
 
-  removeTag(tag1: string) {
-    this.tagNames = this.tagNames.filter(tag2 => tag1 !== tag2)
-  }
-  private get tagNames(): string[] {
-    return this.tagsInput.map(tag => tag.name)
-  }
-  private set tagNames(tags: string[]) {
-    this.tagsInput = tags
+const tagNames = computed({
+  get: () => tagsInput.value.map(tag => tag.name),
+  set: (tags: string[]) =>
+    (tagsInput.value = tags
       .map(rmCtrlChar)
       .filter(name => !!name)
-      .map(name => ({ name }))
-  }
+      .map(name => ({ name }))),
+})
 
-  private get memberOfSelectedGroup(): ResponseUser[] {
-    const users = this.$store.direct.state.usersCache.users
-    if (!users?.size || this.groupInput === null) {
-      return []
-    }
-    return [...users.values()].filter(({ userId }) =>
-      this.groupInput?.members.includes(userId)
-    )
+const allGroups = ref<ResponseGroup[]>([])
+const allTags = ref<string[]>([])
+
+const sortGroups = (
+  a: ResponseGroup,
+  b: ResponseGroup,
+  currentUser: ResponseUser
+) => {
+  const adminA = a.admins.includes(currentUser.userId) ? -1 : 1
+  const adminB = b.admins.includes(currentUser.userId) ? -1 : 1
+  if (adminA !== adminB) {
+    return adminA - adminB
+  } else {
+    return a.name.localeCompare(b.name)
+  }
+}
+const fetchGroups = async () => {
+  const [groups, groupIds] = await Promise.all([
+    api.groups.getGroups(),
+    api.groups.getMyGroups({ relation: GetMyGroupsRelationEnum.Belongs }),
+  ])
+  const currentUser = store.direct.state.me!
+  if (!currentUser) {
+    return
   }
+  allGroups.value = groups
+    .sort((a, b) => sortGroups(a, b, currentUser))
+    .filter(group => groupIds.includes(group.groupId))
 }
+const fetchTags = async () => {
+  allTags.value = (await api.tags.getTag()).map(({ name }) => name)
+}
+
+;(async () => Promise.all([fetchGroups(), fetchTags()]))()
+
+const removeTag = (tag1: string) => {
+  tagNames.value = tagNames.value.filter(tag2 => tag1 !== tag2)
+}
+
+const memberOfSelectedGroup = computed(() => {
+  const users = store.direct.state.usersCache.users
+  if (!users?.size || groupInput.value === null) {
+    return []
+  }
+  return [...users.values()].filter(({ userId }) =>
+    groupInput.value?.members.includes(userId)
+  )
+})
 </script>
diff --git a/src/components/event/EventFormSummary.vue b/src/components/event/EventFormSummary.vue
index 9bf58759..5189cada 100644
--- a/src/components/event/EventFormSummary.vue
+++ b/src/components/event/EventFormSummary.vue
@@ -2,13 +2,13 @@
   <div>
     <SummaryItem>
       <SummaryItemCaption>New Event</SummaryItemCaption>
-      <SummaryItemMain>{{ name }}</SummaryItemMain>
+      <SummaryItemMain>{{ eventSummary.name }}</SummaryItemMain>
       <!-- <SummaryItemSubtext>
         <v-icon :color="openIcon.color">{{ openIcon.icon }}</v-icon>
         {{ openString }}
       </SummaryItemSubtext> -->
       <EventTag
-        v-for="tag in tags"
+        v-for="tag in eventSummary.tags"
         :key="tag.name"
         :name="tag.name"
         class="mr-3"
@@ -16,7 +16,7 @@
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Group</SummaryItemCaption>
-      <SummaryItemText>{{ groupName }}</SummaryItemText>
+      <SummaryItemText>{{ eventSummary.groupName }}</SummaryItemText>
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Open</SummaryItemCaption>
@@ -25,7 +25,7 @@
         <span class="text-h6 ml-2">{{ openString }}</span>
       </SummaryItemText>
       <v-alert
-        v-if="!open && isEdit && openChanged()"
+        v-if="!eventSummary.open && isEdit && openChanged()"
         border="left"
         colored-border
         type="warning"
@@ -38,25 +38,27 @@
     <SummaryItem>
       <SummaryItemCaption>Date</SummaryItemCaption>
       <SummaryItemText>
-        {{ formatDate(timeStart) }}
+        {{ formatDate(eventSummary.timeStart) }}
         <v-icon>mdi-chevron-right</v-icon>
-        {{ formatDate(timeEnd) }}
+        {{ formatDate(eventSummary.timeEnd) }}
       </SummaryItemText>
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Place</SummaryItemCaption>
       <SummaryItemText>
-        <event-place :place="place" />
+        <event-place :place="eventSummary.place" />
       </SummaryItemText>
-      <SummaryItemSubtext v-if="!isPrivate">
+      <SummaryItemSubtext v-if="!eventSummary.isPrivate">
         <v-icon :color="sharedRoomIcon.color">{{ sharedRoomIcon.icon }}</v-icon>
         {{ sharedRoomString }}
       </SummaryItemSubtext>
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Description</SummaryItemCaption>
-      <div v-if="!description" class="text--secondary">説明はありません</div>
-      <MarkdownField v-else :src="description" />
+      <div v-if="!eventSummary.description" class="text--secondary">
+        説明はありません
+      </div>
+      <MarkdownField v-else :src="eventSummary.description" />
     </SummaryItem>
     <SummaryItem>
       <SummaryItemCaption>Invitees</SummaryItemCaption>
@@ -85,9 +87,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import MarkdownField from '@/components/shared/MarkdownField.vue'
 import EventTag from '@/components/shared/EventTag.vue'
 import SummaryItem from '@/components/shared/SummaryItem.vue'
@@ -95,10 +96,14 @@ import SummaryItemCaption from '@/components/shared/SummaryItemCaption.vue'
 import SummaryItemMain from '@/components/shared/SummaryItemMain.vue'
 import SummaryItemText from '@/components/shared/SummaryItemText.vue'
 import SummaryItemSubtext from '@/components/shared/SummaryItemSubtext.vue'
-import { formatDate, DATETIME_DISPLAY_FORMAT } from '@/workers/date'
+import {
+  formatDate as _formatDate,
+  DATETIME_DISPLAY_FORMAT,
+} from '@/workers/date'
 import EventPlace from '@/components/event/EventPlace.vue'
 import { EventInputContent } from '@/components/event/EventFormContent.vue'
-import { ResponseUser } from '@/api'
+import { useStore } from '@/workers/store'
+
 export type EventSummary = {
   name: string
   description: string
@@ -112,108 +117,57 @@ export type EventSummary = {
   timeEnd: string
 }
 
-@Component({
-  components: {
-    MarkdownField,
-    EventTag,
-    SummaryItem,
-    SummaryItemCaption,
-    SummaryItemMain,
-    SummaryItemText,
-    SummaryItemSubtext,
-    EventPlace,
-  },
+const props = defineProps<{
+  content: EventInputContent
+  eventSummary: EventSummary
+  isEdit: boolean
+}>()
+
+const store = useStore()
+
+const page = ref(1)
+const inviteesPerPage = 6
+const originalOpen = ref<boolean | null>(null)
+
+const sharedRoomString = computed(() =>
+  props.eventSummary.sharedRoom ? '部屋の共用可能' : '部屋の共用不可能'
+)
+
+const sharedRoomIcon = computed(() =>
+  props.eventSummary.sharedRoom
+    ? { icon: 'mdi-door-open', color: 'success' }
+    : { icon: 'mdi-door-closed-lock', color: 'error' }
+)
+
+const openString = computed(() =>
+  props.eventSummary.open
+    ? 'グループ外の人も参加できます'
+    : 'グループ外の人は参加できません'
+)
+
+const openIcon = computed(() =>
+  props.eventSummary.open
+    ? { icon: 'mdi-account-multiple-plus', color: 'success' }
+    : { icon: 'mdi-account-multiple-remove', color: 'error' }
+)
+
+const formatDate = _formatDate(DATETIME_DISPLAY_FORMAT)
+const invitees = computed(() => {
+  const userById = store.direct.getters.usersCache.userById
+  if (!props.content.group) return []
+  return props.content.group.members.flatMap(userId => {
+    const user = userById(userId)
+    return user ? user : []
+  })
 })
-export default class EventFormSummary extends Vue {
-  @Prop({ type: Object, required: true })
-  content!: EventInputContent
-
-  @Prop({ type: String, required: true })
-  name!: string
-
-  @Prop({ type: String, required: true })
-  groupName!: string
-
-  @Prop({ type: Boolean, required: true })
-  open!: boolean
-
-  @Prop({ type: Array, required: true })
-  tags!: { name: string }[]
-
-  @Prop({ type: String, required: true })
-  description!: string
-
-  @Prop({ type: Boolean, required: true })
-  isPrivate!: boolean
-
-  @Prop({ type: String, required: true })
-  place!: string
-
-  @Prop({ type: String, required: true })
-  timeStart!: string
-
-  @Prop({ type: String, required: true })
-  timeEnd!: string
-
-  @Prop({ type: Boolean, required: true })
-  sharedRoom!: boolean
 
-  @Prop({ type: Boolean, required: true })
-  isEdit!: boolean
+const inviteesSlice = computed(() =>
+  invitees.value.slice(
+    (page.value - 1) * inviteesPerPage,
+    page.value * inviteesPerPage
+  )
+)
 
-  page: number = 1
-  inviteesPerPage: number = 6
-  originalOpen: boolean = null!
-
-  get sharedRoomString(): string {
-    return this.sharedRoom ? '部屋の共用可能' : '部屋の共用不可能'
-  }
-
-  get sharedRoomIcon() {
-    return this.sharedRoom
-      ? { icon: 'mdi-door-open', color: 'success' }
-      : { icon: 'mdi-door-closed-lock', color: 'error' }
-  }
-
-  get openString(): string {
-    return this.open
-      ? 'グループ外の人も参加できます'
-      : 'グループ外の人は参加できません'
-  }
-
-  get openIcon() {
-    return this.open
-      ? { icon: 'mdi-account-multiple-plus', color: 'success' }
-      : { icon: 'mdi-account-multiple-remove', color: 'error' }
-  }
-
-  get formatDate() {
-    return formatDate(DATETIME_DISPLAY_FORMAT)
-  }
-
-  get invitees(): ResponseUser[] {
-    const userById = this.$store.direct.getters.usersCache.userById
-    if (!this.content.group) return []
-    let invitees = this.content.group.members.flatMap(userId => {
-      const user = userById(userId)
-      return user ? user : []
-    })
-    return invitees
-  }
-
-  get inviteesSlice(): ResponseUser[] {
-    return this.invitees.slice(
-      (this.page - 1) * this.inviteesPerPage,
-      this.page * this.inviteesPerPage
-    )
-  }
-
-  openChanged(): boolean {
-    return this.originalOpen !== this.open
-  }
-
-  created() {
-    this.originalOpen = this.open
-  }
-}
+const openChanged = () => originalOpen.value !== props.eventSummary.open
+originalOpen.value = props.eventSummary.open
 </script>
diff --git a/src/components/event/EventFormTimeAndPlace.vue b/src/components/event/EventFormTimeAndPlace.vue
index 4a709dc8..764ef7fe 100644
--- a/src/components/event/EventFormTimeAndPlace.vue
+++ b/src/components/event/EventFormTimeAndPlace.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-form ref="form" v-model="valid">
+  <v-form :ref="form" v-model="valid">
     <v-row>
       <v-col cols="12" md="" class="pl-4 flex-grow-0">
         <div class="text--secondary caption">
@@ -49,9 +49,8 @@
   </v-form>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop, PropSync, Watch, Ref } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
 import Autocomplete from '@/components/shared/Autocomplete.vue'
 import {
   formatDate,
@@ -61,7 +60,6 @@ import {
   getIso8601,
   getTime,
 } from '@/workers/date'
-import { strMax, strMin } from '@/workers/strCmp'
 import api, { ResponseRoom } from '@/api'
 
 export type EventInputTimeAndPlace = {
@@ -71,111 +69,118 @@ export type EventInputTimeAndPlace = {
   timeEnd: string
 }
 
-@Component({
-  components: {
-    Autocomplete,
-  },
+const props = defineProps<{
+  value: boolean
+  eventInputTimeAndPlace: EventInputTimeAndPlace
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:value', newValue: boolean): void
+  (e: 'update:eventInputTimeAndPlace', newValue: EventInputTimeAndPlace): void
+}>()
+
+const sharedRoomInput = computed({
+  get: () => props.eventInputTimeAndPlace.sharedRoom,
+  set: v =>
+    emit('update:eventInputTimeAndPlace', {
+      ...props.eventInputTimeAndPlace,
+      sharedRoom: v,
+    }),
 })
-export default class EventFormTimeAndPlace extends Vue {
-  @Prop({ type: Boolean, required: true })
-  value!: boolean
-
-  @PropSync('room', {
-    validator: prop => typeof prop === 'object' || prop === null,
-    required: true,
-  })
-  roomInput!: ResponseRoom | null
-
-  @PropSync('timeStart', { type: String, required: true })
-  timeStartInput!: string
-
-  @PropSync('timeEnd', { type: String, required: true })
-  timeEndInput!: string
-
-  @PropSync('sharedRoom', { type: Boolean, required: true })
-  sharedRoomInput!: boolean
-
-  dates: string[] = []
-  allRooms: ResponseRoom[] = []
-
-  async created() {
-    this.allRooms = (await api.rooms.getRooms({ dateBegin: today() })).filter(
-      room => room.verified
-    )
-  }
-
-  @Watch('sharedRoomInput')
-  @Watch('dates')
-  onQueryChange() {
-    this.roomInput = null
-    this.timeStartInput = ''
-    this.timeEndInput = ''
-  }
-
-  @Ref()
-  readonly form!: { validate(): void }
-
-  @Watch('_timeStart')
-  @Watch('_timeEnd')
-  @Watch('roomInput')
-  private async onTimeFixed() {
-    if (!this._timeStart || !this._timeEnd) {
-      return
+const roomInput = computed({
+  get: () => props.eventInputTimeAndPlace.room,
+  set: v =>
+    emit('update:eventInputTimeAndPlace', {
+      ...props.eventInputTimeAndPlace,
+      room: v,
+    }),
+})
+const timeStartInput = computed({
+  get: () => props.eventInputTimeAndPlace.timeStart,
+  set: v =>
+    emit('update:eventInputTimeAndPlace', {
+      ...props.eventInputTimeAndPlace,
+      timeStart: v,
+    }),
+})
+const timeEndInput = computed({
+  get: () => props.eventInputTimeAndPlace.timeEnd,
+  set: v =>
+    emit('update:eventInputTimeAndPlace', {
+      ...props.eventInputTimeAndPlace,
+      timeEnd: v,
+    }),
+})
+const dates = ref<string[]>([])
+const allRooms = ref<ResponseRoom[]>([])
+
+;(async () => {
+  allRooms.value = (await api.rooms.getRooms({ dateBegin: today() })).filter(
+    room => room.verified
+  )
+})()
+
+const form = ref<{ validate(): void }>()
+
+const _timeStart = computed({
+  get: () => timeStartInput.value && getTime(timeStartInput.value),
+  set: time => {
+    if (roomInput.value) {
+      timeStartInput.value = getIso8601(
+        getDate(roomInput.value.timeStart),
+        time
+      )
     }
-    await this.$nextTick()
-    this.form.validate()
-  }
+  },
+})
 
-  get _timeStart(): string {
-    return this.timeStartInput && getTime(this.timeStartInput)
-  }
-  set _timeStart(time: string) {
-    if (this.roomInput) {
-      this.timeStartInput = getIso8601(getDate(this.roomInput.timeStart), time)
-    }
-  }
-  get _timeEnd(): string {
-    return this.timeEndInput && getTime(this.timeEndInput)
-  }
-  set _timeEnd(time: string) {
-    if (this.roomInput) {
-      this.timeEndInput = getIso8601(getDate(this.roomInput.timeEnd), time)
+const _timeEnd = computed({
+  get: () => timeEndInput.value && getTime(timeEndInput.value),
+  set: time => {
+    if (roomInput.value) {
+      timeEndInput.value = getIso8601(getDate(roomInput.value.timeEnd), time)
     }
-  }
+  },
+})
 
-  get dateMin(): string {
-    return today()
-  }
-  get roomStartTime(): string | null {
-    return this.roomInput && getTime(this.roomInput.timeStart)
-  }
+watch([sharedRoomInput, dates], () => {
+  roomInput.value = null
+  timeStartInput.value = ''
+  timeEndInput.value = ''
+})
 
-  get roomEndTime(): string | null {
-    return this.roomInput && getTime(this.roomInput.timeEnd)
-  }
+watch([_timeStart, _timeEnd, roomInput], async () => {
+  if (!_timeStart.value || _timeEnd.value) return
+  await nextTick()
+  if (!form.value) return
+  form.value.validate()
+})
 
-  get availableRooms(): ResponseRoom[] {
-    const key = this.sharedRoomInput ? 'sharedTimes' : 'freeTimes'
-    return this.allRooms.flatMap(room =>
-      this.dates.flatMap(date =>
-        room[key]
-          .filter(({ timeStart }) => timeStart.startsWith(date))
-          .map(({ timeStart, timeEnd }) => ({ ...room, timeStart, timeEnd }))
-      )
+const dateMin = today()
+const roomStartTime = computed(
+  () => roomInput.value && getTime(roomInput.value.timeStart)
+)
+const roomEndTime = computed(() => roomInput.value && roomInput.value.timeEnd)
+
+const availableRooms = computed((): ResponseRoom[] => {
+  const key = sharedRoomInput.value ? 'sharedTimes' : 'freeTimes'
+  return allRooms.value.flatMap(room =>
+    dates.value.flatMap(date =>
+      room[key]
+        .filter(({ timeStart }) => timeStart.startsWith(date))
+        .map(({ timeStart, timeEnd }) => ({ ...room, timeStart, timeEnd }))
     )
-  }
-
-  get formatAvailableRoom() {
-    const fmt = formatDate(DATETIME_DISPLAY_FORMAT)
-    return (r: ResponseRoom) =>
-      `${r.place}: ${fmt(r.timeStart)} ~ ${fmt(r.timeEnd)}`
-  }
+  )
+})
 
-  get valid(): boolean {
-    return this.value
-  }
-  set valid(value: boolean) {
-    this.$emit('input', value)
-  }
+const formatAvailableRoom = () => {
+  const fmt = formatDate(DATETIME_DISPLAY_FORMAT)
+  return (r: ResponseRoom) =>
+    `${r.place}: ${fmt(r.timeStart)} ~ ${fmt(r.timeEnd)}`
 }
+
+const valid = computed({
+  get: () => props.value,
+  set: v => emit('update:value', v),
+})
 </script>
diff --git a/src/components/event/EventFormTimeAndPlaceInstant.vue b/src/components/event/EventFormTimeAndPlaceInstant.vue
index 9344a05b..4999eff9 100644
--- a/src/components/event/EventFormTimeAndPlaceInstant.vue
+++ b/src/components/event/EventFormTimeAndPlaceInstant.vue
@@ -44,10 +44,9 @@
   </v-form>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop, PropSync, Watch, Ref } from 'vue-property-decorator'
-import { getDate, getTime, getIso8601, today } from '@/workers/date'
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { getIso8601, today } from '@/workers/date'
 
 export type EventInputTimeAndPlaceInstant = {
   place: string
@@ -55,67 +54,77 @@ export type EventInputTimeAndPlaceInstant = {
   timeEnd: string
 }
 
-@Component({})
-export default class EventFormTimeAndPlaceInstant extends Vue {
-  @PropSync('place', { type: String, required: true })
-  placeInput!: string
+const props = defineProps<{
+  value: boolean
+  eventInputTimeAndPlaceInstant: EventInputTimeAndPlaceInstant
+}>()
 
-  @PropSync('timeStart', { type: String, required: true })
-  timeStartInput!: string
+const emit = defineEmits<{
+  (
+    e: 'update:eventInputTimeAndPlaceInstant',
+    v: EventInputTimeAndPlaceInstant
+  ): void
+  (e: 'update:value', v: boolean): void
+}>()
 
-  @PropSync('timeEnd', { type: String, required: true })
-  timeEndInput!: string
+const placeInput = computed({
+  get: () => props.eventInputTimeAndPlaceInstant.place,
+  set: v =>
+    emit('update:eventInputTimeAndPlaceInstant', {
+      ...props.eventInputTimeAndPlaceInstant,
+      place: v,
+    }),
+})
 
-  @Prop({ type: Boolean, required: true })
-  value!: boolean
+const timeStartInput = computed({
+  get: () => props.eventInputTimeAndPlaceInstant.timeStart,
+  set: v =>
+    emit('update:eventInputTimeAndPlaceInstant', {
+      ...props.eventInputTimeAndPlaceInstant,
+      timeStart: v,
+    }),
+})
 
-  private dateStartMem = ''
-  private dateEndMem = ''
-  private timeStartMem = ''
-  private timeEndMem = ''
+const timeEndInput = computed({
+  get: () => props.eventInputTimeAndPlaceInstant.timeEnd,
+  set: v =>
+    emit('update:eventInputTimeAndPlaceInstant', {
+      ...props.eventInputTimeAndPlaceInstant,
+      timeEnd: v,
+    }),
+})
 
-  @Ref()
-  readonly form!: { validate(): void }
+const valid = computed({
+  get: () => props.value,
+  set: v => emit('update:value', v),
+})
 
-  @Watch('timeStartInput')
-  @Watch('timeEndInput')
-  private async onDateTimeFixed() {
-    if (!this.timeStartInput || !this.timeEndInput) {
-      return
-    }
-    await this.$nextTick()
-    this.form.validate()
-  }
-
-  @Watch('dateStartMem')
-  @Watch('timeStartMem')
-  private onTimeStartMemChange() {
-    if (this.dateStartMem && this.timeStartMem) {
-      this.timeStartInput = getIso8601(this.dateStartMem, this.timeStartMem)
-    }
-  }
+const form = ref<{ validate(): void }>()
+const dateStartMem = ref('')
+const dateEndMem = ref('')
+const timeStartMem = ref('')
+const timeEndMem = ref('')
 
-  private setDefaultDateEnd() {
-    if (!this.dateEndMem) this.dateEndMem = this.dateStartMem
-  }
+watch([timeStartInput, timeEndInput], async () => {
+  if (!timeStartInput.value || !timeEndInput.value) return
+  await nextTick()
+  form.value?.validate()
+})
 
-  @Watch('dateEndMem')
-  @Watch('timeEndMem')
-  private onTimeEndMemChange() {
-    if (this.dateEndMem && this.timeEndMem) {
-      this.timeEndInput = getIso8601(this.dateEndMem, this.timeEndMem)
-    }
+watch([dateStartMem, timeStartMem], () => {
+  if (dateStartMem.value && timeStartMem.value) {
+    timeStartInput.value = getIso8601(dateStartMem.value, timeStartMem.value)
   }
+})
 
-  get dateMin(): string {
-    return today()
+watch([dateEndMem, timeEndMem], () => {
+  if (dateEndMem.value && timeEndMem.value) {
+    timeEndInput.value = getIso8601(dateEndMem.value, timeEndMem.value)
   }
+})
 
-  get valid(): boolean {
-    return this.value
-  }
-  set valid(value: boolean) {
-    this.$emit('input', value)
-  }
+const setDefaultDateEnd = () => {
+  if (!dateEndMem.value) dateEndMem.value = dateStartMem.value
 }
+const dateMin = today()
 </script>
diff --git a/src/components/event/EventList.vue b/src/components/event/EventList.vue
index 005514bd..a128f3e8 100644
--- a/src/components/event/EventList.vue
+++ b/src/components/event/EventList.vue
@@ -12,40 +12,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import EventListItem from '@/components/event/EventListItem.vue'
-import { formatDate, getDate, DATE_DISPLAY_FORMAT } from '@/workers/date'
+import {
+  formatDate as _formatDate,
+  getDate,
+  DATE_DISPLAY_FORMAT,
+} from '@/workers/date'
 import { ResponseEvent } from '@/api'
 
-@Component({
-  components: {
-    EventListItem,
-  },
-})
-export default class EventList extends Vue {
-  @Prop({ type: Array, required: true })
-  events!: ResponseEvent[]
-
-  @Prop({ type: Function, default: () => true })
-  eventFilter!: (e: ResponseEvent) => boolean
+const props = defineProps<{
+  events: ResponseEvent[]
+  eventFilter: (e: ResponseEvent) => boolean
+}>()
 
-  get filteredEvents() {
-    return this.events.filter(this.eventFilter)
-  }
+const filteredEvents = computed(() => props.events.filter(props.eventFilter))
 
-  get isDateBorder() {
-    return (i: number) => {
-      if (i === 0) return true
-      const e1 = this.filteredEvents[i - 1]
-      const e2 = this.filteredEvents[i]
-      return getDate(e1.timeStart) !== getDate(e2.timeStart)
-    }
-  }
+const isDateBorder = computed(() => (i: number) => {
+  if (i === 0) return true
+  const e1 = filteredEvents.value[i - 1]
+  const e2 = filteredEvents.value[i]
+  return getDate(e1.timeStart) !== getDate(e2.timeStart)
+})
 
-  get formatDate() {
-    return formatDate(DATE_DISPLAY_FORMAT)
-  }
-}
+const formatDate = _formatDate(DATE_DISPLAY_FORMAT)
 </script>
diff --git a/src/components/event/EventListItem.vue b/src/components/event/EventListItem.vue
index 7a7f3e41..df2ffa70 100644
--- a/src/components/event/EventListItem.vue
+++ b/src/components/event/EventListItem.vue
@@ -33,30 +33,20 @@
   </v-card>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
-import UserAvatar from '@/components/shared/UserAvatar.vue'
+<script setup lang="ts">
 import EventTag from '@/components/shared/EventTag.vue'
 import MarkdownField from '@/components/shared/MarkdownField.vue'
-import { formatDate, DATETIME_DISPLAY_FORMAT } from '@/workers/date'
+import {
+  formatDate as _formatDate,
+  DATETIME_DISPLAY_FORMAT,
+} from '@/workers/date'
 import { ResponseEvent } from '@/api'
 
-@Component({
-  components: {
-    UserAvatar,
-    EventTag,
-    MarkdownField,
-  },
-})
-export default class EventListItem extends Vue {
-  @Prop({ type: Object, required: true })
-  event!: ResponseEvent
+defineProps<{
+  event: ResponseEvent
+}>()
 
-  get formatDate() {
-    return formatDate(DATETIME_DISPLAY_FORMAT)
-  }
-}
+const formatDate = _formatDate(DATETIME_DISPLAY_FORMAT)
 </script>
 <style scoped>
 .markdown-field {
diff --git a/src/components/event/EventListToday.vue b/src/components/event/EventListToday.vue
index 91466e02..1314c684 100644
--- a/src/components/event/EventListToday.vue
+++ b/src/components/event/EventListToday.vue
@@ -20,33 +20,24 @@
   </div>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+<script setup lang="ts">
+import { ref } from 'vue'
 import EventListItem from '@/components/event/EventListItem.vue'
 import { today, todayEnd } from '@/workers/date'
 import api, { ResponseEvent } from '@/api'
 
-@Component({
-  components: {
-    EventListItem,
-  },
-})
-export default class EventListToday extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  events: ResponseEvent[] = []
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const events = ref<ResponseEvent[]>([])
 
-  async created() {
-    this.status = 'loading'
-    try {
-      this.events = await api.events.getEvents({
-        dateBegin: today(),
-        dateEnd: todayEnd(),
-      })
-      this.status = 'loaded'
-    } catch (__) {
-      this.status = 'error'
-    }
+;(async () => {
+  try {
+    events.value = await api.events.getEvents({
+      dateBegin: today(),
+      dateEnd: todayEnd(),
+    })
+    status.value = 'loaded'
+  } catch (__) {
+    status.value = 'error'
   }
-}
+})()
 </script>
diff --git a/src/components/event/EventPlace.vue b/src/components/event/EventPlace.vue
index 17465086..e836741c 100644
--- a/src/components/event/EventPlace.vue
+++ b/src/components/event/EventPlace.vue
@@ -19,21 +19,12 @@
   </span>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+<script setup lang="ts">
 import { Icon } from '@iconify/vue2'
-@Component({
-  components: {
-    Icon,
-  },
-})
-export default class EventPlace extends Vue {
-  @Prop({ type: String, required: true })
-  place!: string
+const props = defineProps<{
+  place: string
+}>()
 
-  contains(searchWord: string): boolean {
-    return this.place.toLowerCase().includes(searchWord)
-  }
-}
+const contains = (searchWord: string) =>
+  props.place.toLocaleLowerCase().includes(searchWord)
 </script>
diff --git a/src/components/event/EventTagEditor.vue b/src/components/event/EventTagEditor.vue
index dcaed64f..605ed18d 100644
--- a/src/components/event/EventTagEditor.vue
+++ b/src/components/event/EventTagEditor.vue
@@ -8,8 +8,8 @@
     chips
     clearable
     multiple
-    @focus="$emit('tag-edit-start')"
-    @blur="$emit('tag-edit-end')"
+    @focus="emit('tagEditStart')"
+    @blur="emit('tagEditEnd')"
   >
     <template #selection="{ item }">
       <EventTag close :name="item" @click:close="removeTag(item)" />
@@ -17,35 +17,27 @@
   </v-combobox>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed } from 'vue'
 import EventTag from '@/components/shared/EventTag.vue'
 
-@Component({
-  components: {
-    EventTag,
-  },
-})
-export default class EventTagEditor extends Vue {
-  @Prop({ type: Array, required: true })
-  value!: string[]
+const props = defineProps<{
+  value: string[]
+  tags: string[] | null
+}>()
 
-  @Prop({
-    validator: prop => prop instanceof Array || prop === null,
-    required: true,
-  })
-  tags!: string[] | null
+const emit = defineEmits<{
+  (e: 'input', v: string[]): void
+  (e: 'tagEditStart'): void
+  (e: 'tagEditEnd'): void
+}>()
 
-  removeTag(tag1: string) {
-    this.editedTags = this.editedTags.filter(tag2 => tag1 !== tag2)
-  }
+const editedTags = computed({
+  get: () => props.value,
+  set: v => emit('input', v),
+})
 
-  get editedTags(): string[] {
-    return this.value
-  }
-  set editedTags(tags: string[]) {
-    this.$emit('input', tags)
-  }
+const removeTag = (tag1: string) => {
+  editedTags.value = editedTags.value.filter(tag2 => tag1 !== tag2)
 }
 </script>
diff --git a/src/components/shared/SummaryItem.vue b/src/components/shared/SummaryItem.vue
index f49b47ed..b617332e 100644
--- a/src/components/shared/SummaryItem.vue
+++ b/src/components/shared/SummaryItem.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="mb-7">
     <slot />
   </div>
diff --git a/src/components/shared/SummaryItemCaption.vue b/src/components/shared/SummaryItemCaption.vue
index c3f6af32..5d2aa51c 100644
--- a/src/components/shared/SummaryItemCaption.vue
+++ b/src/components/shared/SummaryItemCaption.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="text--secondary">
     <slot />
   </div>
diff --git a/src/components/shared/SummaryItemMain.vue b/src/components/shared/SummaryItemMain.vue
index b4c380ef..62912fb2 100644
--- a/src/components/shared/SummaryItemMain.vue
+++ b/src/components/shared/SummaryItemMain.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="display-1">
     <slot />
   </div>
diff --git a/src/components/shared/SummaryItemSubtext.vue b/src/components/shared/SummaryItemSubtext.vue
index 155e6dee..3e80687c 100644
--- a/src/components/shared/SummaryItemSubtext.vue
+++ b/src/components/shared/SummaryItemSubtext.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="text--secondary body-2">
     <slot />
   </div>
diff --git a/src/components/shared/SummaryItemText.vue b/src/components/shared/SummaryItemText.vue
index 7bf1cc8e..1461df2d 100644
--- a/src/components/shared/SummaryItemText.vue
+++ b/src/components/shared/SummaryItemText.vue
@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="headline">
     <slot />
   </div>
diff --git a/src/pages/EventDetail.vue b/src/pages/EventDetail.vue
index df95facb..a1ef2174 100644
--- a/src/pages/EventDetail.vue
+++ b/src/pages/EventDetail.vue
@@ -52,8 +52,8 @@
             v-else
             v-model="editedTags"
             :tags="tagNames"
-            @tag-edit-start="onTagEditStart"
-            @tag-edit-end="onTagEditEnd"
+            @tagEditStart="onTagEditStart"
+            @tagEditEnd="onTagEditEnd"
           />
         </div>
         <div class="text--secondary">
@@ -106,7 +106,7 @@
       <attendance-form
         v-if="canAttendEvent && !isFinishedEvent"
         class="mb-5 pl-5 pr-5 pb-5"
-        :value="attendance"
+        :attendance="attendance"
         @change="onAttendanceChange"
       />
       <div>
@@ -117,168 +117,136 @@
   </v-container>
 </template>
 
-<script lang="ts">
-import Vue from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import ProgressCircular from '@/components/shared/ProgressCircular.vue'
 import LoadFailedText from '@/components/shared/LoadFailedText.vue'
 import EventTag from '@/components/shared/EventTag.vue'
 import MarkdownField from '@/components/shared/MarkdownField.vue'
 import EventTagEditor from '@/components/event/EventTagEditor.vue'
 import ActionMenu from '@/components/shared/ActionMenu.vue'
-import UserAvatar from '@/components/shared/UserAvatar.vue'
 import AttendanceForm from '@/components/event/AttendanceForm.vue'
 import EventAttendees from '@/components/event/EventAttendees.vue'
-import { formatDate, DATETIME_DISPLAY_FORMAT } from '@/workers/date'
+import {
+  formatDate as _formatDate,
+  DATETIME_DISPLAY_FORMAT,
+} from '@/workers/date'
 import { isTitechRoom, calcRoomPdfUrl } from '@/workers/TokyoTech'
 import EventPlace from '@/components/event/EventPlace.vue'
 
-import api, {
-  ResponseEventDetail,
-  ResponseUser,
-  RequestScheduleScheduleEnum,
-} from '@/api'
+import api, { ResponseEventDetail, RequestScheduleScheduleEnum } from '@/api'
+import { useStore } from '@/workers/store'
+import { useRoute } from 'vue-router/composables'
 
-@Component({
-  components: {
-    ProgressCircular,
-    LoadFailedText,
-    EventTag,
-    MarkdownField,
-    EventTagEditor,
-    ActionMenu,
-    EventAttendees,
-    UserAvatar,
-    AttendanceForm,
-    EventPlace,
-  },
-})
-export default class EventDetail extends Vue {
-  status: 'loading' | 'loaded' | 'error' = 'loading'
-  isTagEditting = false
-
-  event: ResponseEventDetail | null = null
+const route = useRoute()
+const store = useStore()
+const me = store.direct.state.me!
 
-  attendance: RequestScheduleScheduleEnum | null = null
+const status = ref<'loading' | 'loaded' | 'error'>('loading')
+const isTagEditting = ref(false)
 
-  editedTags: string[] = []
+const event = ref<ResponseEventDetail | null>(null)
+const attendance = ref<RequestScheduleScheduleEnum | null>(null)
+const editedTags = ref<string[]>([])
 
-  async created() {
-    const eventID = this.$route.params.id
-    this.status = 'loading'
-    try {
-      this.event = await api.events.getEventDetail({ eventID })
-      this.attendance =
-        (this.event.attendees.find(({ userId }) => userId === this.me.userId)
-          ?.schedule as RequestScheduleScheduleEnum | undefined) ?? null
-    } catch (__) {
-      this.status = 'error'
-      return
-    }
-    this.status = 'loaded'
+;(async () => {
+  const eventID = route.params.id
+  status.value = 'loading'
+  try {
+    event.value = await api.events.getEventDetail({ eventID })
+    attendance.value =
+      (event.value.attendees.find(({ userId }) => userId === me.userId)
+        ?.schedule as RequestScheduleScheduleEnum | undefined) ?? null
+  } catch (__) {
+    status.value = 'error'
+    return
   }
+  status.value = 'loaded'
+})()
 
-  get formatDate() {
-    return formatDate(DATETIME_DISPLAY_FORMAT)
-  }
+const formatDate = _formatDate(DATETIME_DISPLAY_FORMAT)
 
-  get sharedRoomString(): string {
-    return this.event?.sharedRoom ? '部屋の共用可能' : '部屋の共用不可能'
-  }
-  get sharedRoomIcon() {
-    return this.event?.sharedRoom
-      ? { icon: 'mdi-door-open', color: 'success' }
-      : { icon: 'mdi-door-closed-lock', color: 'error' }
-  }
+const sharedRoomString = computed(() =>
+  event.value?.sharedRoom ? '部屋の共用可能' : '部屋の共用不可能'
+)
+const sharedRoomIcon = computed(() =>
+  event.value?.sharedRoom
+    ? { icon: 'mdi-door-open', color: 'success' }
+    : { icon: 'mdi-door-closed-lock', color: 'error' }
+)
 
-  get tagNames(): string[] {
-    return this.event?.tags.map(({ name }) => name) ?? []
-  }
-
-  async onTagEditStart() {
-    this.editedTags = this.event?.tags.map(({ name }) => name) ?? []
-  }
+const tagNames = computed(() => event.value?.tags.map(({ name }) => name) ?? [])
 
-  async onTagEditEnd() {
-    const prevTagNames = this.event?.tags.map(({ name }) => name) ?? []
-    const added = difference(this.editedTags, prevTagNames)
-    const deleted = difference(prevTagNames, this.editedTags)
-    const eventID = this.$route.params.id
-    await Promise.all([
-      ...added.map(name =>
-        api.events.addEventTag({ eventID, requestTag: { name } })
-      ),
-      ...deleted.map(name =>
-        api.events.deleteEventTag({ eventID, tagName: name })
-      ),
-    ])
-    this.event = await api.events.getEventDetail({ eventID })
-    this.isTagEditting = false
-    this.editedTags = []
-  }
-
-  get isTitechRoom() {
-    return isTitechRoom
-  }
-
-  get calcRoomPdfUrl() {
-    return calcRoomPdfUrl
-  }
+const onTagEditStart = () => {
+  editedTags.value = event.value?.tags.map(({ name }) => name) ?? []
+}
 
-  get me(): ResponseUser {
-    return this.$store.direct.state.me!
-  }
+const onTagEditEnd = async () => {
+  const prevTagNames = event.value?.tags.map(({ name }) => name) ?? []
+  const added = difference(editedTags.value, prevTagNames)
+  const deleted = difference(prevTagNames, editedTags.value)
+  const eventID = route.params.id
+  await Promise.all([
+    ...added.map(name =>
+      api.events.addEventTag({ eventID, requestTag: { name } })
+    ),
+    ...deleted.map(name =>
+      api.events.deleteEventTag({ eventID, tagName: name })
+    ),
+  ])
+  event.value = await api.events.getEventDetail({ eventID })
+  isTagEditting.value = false
+  editedTags.value = []
+}
 
-  get isOpenEvent(): boolean {
-    return this.event?.open ?? false
-  }
+const isOpenEvent = computed(() => event.value?.open ?? false)
 
-  get canAttendEvent(): boolean {
-    if (!this.event) {
-      return false
-    }
-    const isOpen = this.isOpenEvent
-    const isEventOfJoiningGroup = this.event.attendees.some(
-      ({ userId }) => userId === this.me.userId
-    )
-    return isOpen || isEventOfJoiningGroup
+const canAttendEvent = computed(() => {
+  if (!event.value) {
+    return false
   }
+  const isOpen = isOpenEvent.value
+  const isEventOfJoiningGroup = event.value.attendees.some(
+    ({ userId }) => userId === me.userId
+  )
+  return isOpen || isEventOfJoiningGroup
+})
 
-  get isFinishedEvent(): boolean {
-    if (!this.event) {
-      return true
-    }
-    return new Date(this.event.timeEnd) < new Date()
+const isFinishedEvent = computed(() => {
+  if (!event.value) {
+    return true
   }
+  return new Date(event.value.timeEnd) < new Date()
+})
 
-  get isMyEvent(): boolean {
-    return (
-      this.event?.admins.includes(this.$store.direct.state.me?.userId ?? '') ??
-      false
-    )
-  }
+const isMyEvent = computed(
+  () =>
+    event.value?.admins.includes(store.direct.state.me?.userId ?? '') ?? false
+)
 
-  async onAttendanceChange(attendance: RequestScheduleScheduleEnum) {
-    const oldAttendance = this.attendance
-    this.attendance = attendance
-    try {
-      if (!this.event) {
-        return
-      }
-      await api.events.updateSchedule({
-        eventID: this.event.eventId,
-        requestSchedule: {
-          schedule: attendance,
-        },
-      })
-      this.event = await api.events.getEventDetail({
-        eventID: this.event.eventId,
-      })
-    } catch (err) {
-      console.error(err)
-      alert('参加予定を登録できませんでした')
-      this.attendance = oldAttendance
+const onAttendanceChange = async (
+  newAttendance: RequestScheduleScheduleEnum
+) => {
+  console.log('fwaohewfjioewfjfihooisu')
+  const oldAttendance = attendance.value
+  attendance.value = newAttendance
+  try {
+    if (!event.value) {
+      return
     }
+    await api.events.updateSchedule({
+      eventID: event.value.eventId,
+      requestSchedule: {
+        schedule: newAttendance,
+      },
+    })
+    event.value = await api.events.getEventDetail({
+      eventID: event.value.eventId,
+    })
+  } catch (err) {
+    console.error(err)
+    alert('参加予定を登録できませんでした')
+    attendance.value = oldAttendance
   }
 }
 
diff --git a/src/workers/store.ts b/src/workers/store.ts
new file mode 100644
index 00000000..78a7e1e8
--- /dev/null
+++ b/src/workers/store.ts
@@ -0,0 +1,7 @@
+// ref: https://github.com/vuejs/vuex/issues/2212#issuecomment-1715259898
+import { getCurrentInstance } from 'vue'
+export const useStore = () => {
+  const vm = getCurrentInstance()
+  if (!vm) throw new Error('must be called in setup')
+  return vm.proxy.$store
+}