diff --git a/src/components/ContactInfo.vue b/src/components/ContactInfo.vue
index 7c6313e463..230da4d027 100644
--- a/src/components/ContactInfo.vue
+++ b/src/components/ContactInfo.vue
@@ -4,26 +4,18 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { useStore } from "@/store";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const contact = ref("");
+const store = useStore();
+const contact = ref("");
 
-    const md = useMarkdownIt();
+const md = useMarkdownIt();
 
-    onMounted(async () => {
-      contact.value = md.render(await store.dispatch("GET_CONTACT_TEXT"));
-    });
-
-    return {
-      contact,
-    };
-  },
+onMounted(async () => {
+  contact.value = md.render(await store.dispatch("GET_CONTACT_TEXT"));
 });
 </script>
 
diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
index daefe711a5..5fa1db1a9b 100644
--- a/src/components/HelpDialog.vue
+++ b/src/components/HelpDialog.vue
@@ -46,7 +46,7 @@
               :name="pageIndex"
               class="q-pa-none"
             >
-              <div class="root">
+              <div class="root" v-if="page.type === 'item'">
                 <q-header class="q-pa-sm">
                   <q-toolbar>
                     <q-toolbar-title class="text-display">
@@ -73,8 +73,8 @@
   </q-dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref, Component } from "vue";
+<script setup lang="ts">
+import { computed, ref, Component } from "vue";
 import HelpPolicy from "@/components/HelpPolicy.vue";
 import LibraryPolicy from "@/components/LibraryPolicy.vue";
 import HowToUse from "@/components/HowToUse.vue";
@@ -86,6 +86,7 @@ import ContactInfo from "@/components/ContactInfo.vue";
 import semver from "semver";
 import { UpdateInfo as UpdateInfoObject } from "../type/preload";
 import { useStore } from "@/store";
+
 type PageItem = {
   type: "item";
   name: string;
@@ -99,197 +100,185 @@ type PageSeparator = {
 };
 type PageData = PageItem | PageSeparator;
 
-export default defineComponent({
-  name: "HelpDialog",
-
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-  },
+const props =
+  defineProps<{
+    modelValue: boolean;
+  }>();
+const emit =
+  defineEmits<{
+    (e: "update:modelValue", val: boolean): void;
+  }>();
 
-  setup(props, { emit }) {
-    const modelValueComputed = computed({
-      get: () => props.modelValue,
-      set: (val) => emit("update:modelValue", val),
-    });
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
 
-    // エディタのアップデート確認
-    const store = useStore();
+// エディタのアップデート確認
+const store = useStore();
 
-    const updateInfos = ref<UpdateInfoObject[]>();
-    store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
+const updateInfos = ref<UpdateInfoObject[]>();
+store.dispatch("GET_UPDATE_INFOS").then((obj) => (updateInfos.value = obj));
 
-    const isCheckingFinished = ref<boolean>(false);
+const isCheckingFinished = ref<boolean>(false);
 
-    // 最新版があるか調べる
-    const currentVersion = ref("");
-    const latestVersion = ref("");
-    window.electron
-      .getAppInfos()
-      .then((obj) => {
-        currentVersion.value = obj.version;
+// 最新版があるか調べる
+const currentVersion = ref("");
+const latestVersion = ref("");
+window.electron
+  .getAppInfos()
+  .then((obj) => {
+    currentVersion.value = obj.version;
+  })
+  .then(() => {
+    fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error("Network response was not ok.");
+        return response.json();
       })
-      .then(() => {
-        fetch("https://api.github.com/repos/VOICEVOX/voicevox/releases", {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
-          },
-        })
-          .then((response) => {
-            if (!response.ok) throw new Error("Network response was not ok.");
-            return response.json();
-          })
-          .then((json) => {
-            const newerVersion = json.find(
-              (item: { prerelease: boolean; tag_name: string }) => {
-                return (
-                  !item.prerelease &&
-                  semver.valid(currentVersion.value) &&
-                  semver.valid(item.tag_name) &&
-                  semver.lt(currentVersion.value, item.tag_name)
-                );
-              }
+      .then((json) => {
+        const newerVersion = json.find(
+          (item: { prerelease: boolean; tag_name: string }) => {
+            return (
+              !item.prerelease &&
+              semver.valid(currentVersion.value) &&
+              semver.valid(item.tag_name) &&
+              semver.lt(currentVersion.value, item.tag_name)
             );
-            if (newerVersion) {
-              latestVersion.value = newerVersion.tag_name;
-            }
-            isCheckingFinished.value = true;
-          })
-          .catch((err) => {
-            throw new Error(err);
-          });
+          }
+        );
+        if (newerVersion) {
+          latestVersion.value = newerVersion.tag_name;
+        }
+        isCheckingFinished.value = true;
+      })
+      .catch((err) => {
+        throw new Error(err);
       });
+  });
 
-    const isUpdateAvailable = computed(() => {
-      return isCheckingFinished.value && latestVersion.value !== "";
-    });
+const isUpdateAvailable = computed(() => {
+  return isCheckingFinished.value && latestVersion.value !== "";
+});
 
-    // エディタのOSSライセンス取得
-    const licenses = ref<Record<string, string>[]>();
-    store.dispatch("GET_OSS_LICENSES").then((obj) => (licenses.value = obj));
+// エディタのOSSライセンス取得
+const licenses = ref<Record<string, string>[]>();
+store.dispatch("GET_OSS_LICENSES").then((obj) => (licenses.value = obj));
 
-    const policy = ref<string>();
-    store.dispatch("GET_POLICY_TEXT").then((obj) => (policy.value = obj));
+const policy = ref<string>();
+store.dispatch("GET_POLICY_TEXT").then((obj) => (policy.value = obj));
+
+const pagedata = computed(() => {
+  const data: PageData[] = [
+    {
+      type: "item",
+      name: "ソフトウェアの利用規約",
+      component: HelpPolicy,
+      props: {
+        policy: policy.value,
+      },
+    },
+    {
+      type: "item",
+      name: "音声ライブラリの利用規約",
+      component: LibraryPolicy,
+    },
+    {
+      type: "item",
+      name: "使い方",
+      component: HowToUse,
+    },
+    {
+      type: "item",
+      name: "開発コミュニティ",
+      component: OssCommunityInfo,
+    },
+    {
+      type: "item",
+      name: "ライセンス情報",
+      component: OssLicense,
+      props: {
+        licenses: licenses.value,
+      },
+    },
+    {
+      type: "item",
+      name: "アップデート情報",
+      component: UpdateInfo,
+      props: {
+        updateInfos: updateInfos.value,
+        isUpdateAvailable: isUpdateAvailable.value,
+        latestVersion: latestVersion.value,
+      },
+    },
+    {
+      type: "item",
+      name: "よくあるご質問",
+      component: QAndA,
+    },
+    {
+      type: "item",
+      name: "お問い合わせ",
+      component: ContactInfo,
+    },
+  ];
+  // エンジンが一つだけの場合は従来の表示のみ
+  if (store.state.engineIds.length > 1) {
+    for (const id of store.getters.GET_SORTED_ENGINE_INFOS.map((m) => m.uuid)) {
+      const manifest = store.state.engineManifests[id];
+      if (!manifest) {
+        store.dispatch("LOG_WARN", `manifest not found: ${id}`);
+        continue;
+      }
 
-    const pagedata = computed(() => {
-      const data = [
+      data.push(
+        {
+          type: "separator",
+          name: manifest.name,
+        },
         {
           type: "item",
-          name: "ソフトウェアの利用規約",
+          name: "利用規約",
+          parent: manifest.name,
           component: HelpPolicy,
           props: {
-            policy: policy.value,
+            policy: manifest.termsOfService,
           },
         },
-        {
-          type: "item",
-          name: "音声ライブラリの利用規約",
-          component: LibraryPolicy,
-        },
-        {
-          type: "item",
-          name: "使い方",
-          component: HowToUse,
-        },
-        {
-          type: "item",
-          name: "開発コミュニティ",
-          component: OssCommunityInfo,
-        },
         {
           type: "item",
           name: "ライセンス情報",
+          parent: manifest.name,
           component: OssLicense,
           props: {
-            licenses: licenses.value,
+            licenses: manifest.dependencyLicenses,
           },
         },
         {
           type: "item",
           name: "アップデート情報",
+          parent: manifest.name,
           component: UpdateInfo,
           props: {
-            updateInfos: updateInfos.value,
-            isUpdateAvailable: isUpdateAvailable.value,
-            latestVersion: latestVersion.value,
+            updateInfos: manifest.updateInfos,
+            // TODO: エンジン側で最新バージョンチェックAPIが出来たら実装する。
+            //       https://github.com/VOICEVOX/voicevox_engine/issues/476
+            isUpdateAvailable: false,
           },
-        },
-        {
-          type: "item",
-          name: "よくあるご質問",
-          component: QAndA,
-        },
-        {
-          type: "item",
-          name: "お問い合わせ",
-          component: ContactInfo,
-        },
-      ] as PageData[];
-      // エンジンが一つだけの場合は従来の表示のみ
-      if (store.state.engineIds.length > 1) {
-        for (const id of store.getters.GET_SORTED_ENGINE_INFOS.map(
-          (m) => m.uuid
-        )) {
-          const manifest = store.state.engineManifests[id];
-          if (!manifest) {
-            store.dispatch("LOG_WARN", `manifest not found: ${id}`);
-            continue;
-          }
-
-          data.push(
-            {
-              type: "separator",
-              name: manifest.name,
-            },
-            {
-              type: "item",
-              name: "利用規約",
-              parent: manifest.name,
-              component: HelpPolicy,
-              props: {
-                policy: manifest.termsOfService,
-              },
-            },
-            {
-              type: "item",
-              name: "ライセンス情報",
-              parent: manifest.name,
-              component: OssLicense,
-              props: {
-                licenses: manifest.dependencyLicenses,
-              },
-            },
-            {
-              type: "item",
-              name: "アップデート情報",
-              parent: manifest.name,
-              component: UpdateInfo,
-              props: {
-                updateInfos: manifest.updateInfos,
-                // TODO: エンジン側で最新バージョンチェックAPIが出来たら実装する。
-                //       https://github.com/VOICEVOX/voicevox_engine/issues/476
-                isUpdateAvailable: false,
-              },
-            }
-          );
         }
-      }
-      return data;
-    });
-
-    const selectedPageIndex = ref(0);
-
-    return {
-      modelValueComputed,
-      pagedata,
-      selectedPageIndex,
-    };
-  },
+      );
+    }
+  }
+  return data;
 });
+
+const selectedPageIndex = ref(0);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/LibraryPolicy.vue b/src/components/LibraryPolicy.vue
index c197b74e3f..afe811e26a 100644
--- a/src/components/LibraryPolicy.vue
+++ b/src/components/LibraryPolicy.vue
@@ -72,69 +72,49 @@
   </q-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useStore } from "@/store";
-import { computed, defineComponent, ref } from "vue";
+import { computed, ref } from "vue";
 import { useMarkdownIt } from "@/plugins/markdownItPlugin";
 
 type DetailKey = { engine: string; character: string };
 
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const md = useMarkdownIt();
+const store = useStore();
+const md = useMarkdownIt();
 
-    const allCharacterInfos = computed(
-      () => store.getters.GET_ALL_CHARACTER_INFOS
-    );
+const sortedEngineInfos = computed(() => store.getters.GET_SORTED_ENGINE_INFOS);
 
-    const sortedEngineInfos = computed(
-      () => store.getters.GET_SORTED_ENGINE_INFOS
-    );
+const engineInfos = computed(
+  () =>
+    new Map(
+      Object.entries(store.state.characterInfos).map(
+        ([engineId, characterInfos]) => [
+          engineId,
+          {
+            engineId,
+            name: store.state.engineManifests[engineId].name,
+            characterInfos: new Map(
+              characterInfos.map((ci) => [ci.metas.speakerUuid, ci])
+            ),
+          },
+        ]
+      )
+    )
+);
 
-    const engineInfos = computed(
-      () =>
-        new Map(
-          Object.entries(store.state.characterInfos).map(
-            ([engineId, characterInfos]) => [
-              engineId,
-              {
-                engineId,
-                name: store.state.engineManifests[engineId].name,
-                characterInfos: new Map(
-                  characterInfos.map((ci) => [ci.metas.speakerUuid, ci])
-                ),
-              },
-            ]
-          )
-        )
-    );
+const convertMarkdown = (text: string) => {
+  return md.render(text);
+};
 
-    const convertMarkdown = (text: string) => {
-      return md.render(text);
-    };
+const selectedInfo = ref<DetailKey | undefined>(undefined);
 
-    const selectedInfo = ref<DetailKey | undefined>(undefined);
-
-    const scroller = ref<HTMLElement>();
-    const selectCharacterInfo = (index: DetailKey | undefined) => {
-      if (scroller.value == undefined)
-        throw new Error("scroller.value == undefined");
-      scroller.value.scrollTop = 0;
-      selectedInfo.value = index;
-    };
-
-    return {
-      characterInfos: allCharacterInfos,
-      engineInfos,
-      convertMarkdown,
-      sortedEngineInfos,
-      selectCharacterInfo,
-      selectedInfo,
-      scroller,
-    };
-  },
-});
+const scroller = ref<HTMLElement>();
+const selectCharacterInfo = (index: DetailKey | undefined) => {
+  if (scroller.value == undefined)
+    throw new Error("scroller.value == undefined");
+  scroller.value.scrollTop = 0;
+  selectedInfo.value = index;
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/OssLicense.vue b/src/components/OssLicense.vue
index 3066288d7c..d3322d1123 100644
--- a/src/components/OssLicense.vue
+++ b/src/components/OssLicense.vue
@@ -6,7 +6,7 @@
     <div class="q-pa-md markdown-body">
       <q-list v-if="detailIndex === undefined">
         <q-item
-          v-for="(license, index) in licenses"
+          v-for="(license, index) in props.licenses"
           :key="index"
           clickable
           dense
@@ -34,37 +34,24 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+<script setup lang="ts">
+import { ref } from "vue";
 
-export default defineComponent({
-  name: "OssLicense",
+const props =
+  defineProps<{
+    licenses: Record<string, string>[];
+  }>();
 
-  props: {
-    licenses: {
-      type: Array as PropType<Record<string, string>[]>,
-      required: true,
-    },
-  },
-  setup() {
-    const detailIndex = ref<number | undefined>(undefined);
+const detailIndex = ref<number | undefined>(undefined);
 
-    const scroller = ref<HTMLElement>();
+const scroller = ref<HTMLElement>();
 
-    const selectLicenseIndex = (index: number | undefined) => {
-      if (scroller.value == undefined)
-        throw new Error("scroller.value == undefined");
-      scroller.value.scrollTop = 0;
-      detailIndex.value = index;
-    };
-
-    return {
-      selectLicenseIndex,
-      detailIndex,
-      scroller,
-    };
-  },
-});
+const selectLicenseIndex = (index: number | undefined) => {
+  if (scroller.value == undefined)
+    throw new Error("scroller.value == undefined");
+  scroller.value.scrollTop = 0;
+  detailIndex.value = index;
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/UpdateInfo.vue b/src/components/UpdateInfo.vue
index 6ec61b4d2f..f9a22be1e7 100644
--- a/src/components/UpdateInfo.vue
+++ b/src/components/UpdateInfo.vue
@@ -4,13 +4,15 @@
     class="relative-absolute-wrapper scroller markdown-body"
   >
     <div class="q-pa-md">
-      <template v-if="isUpdateAvailable">
-        <h3>最新バージョン {{ latestVersion }} が見つかりました</h3>
-        <a href="{{ downloadLink }}" target="_blank">ダウンロードページ</a>
+      <template v-if="props.isUpdateAvailable">
+        <h3>最新バージョン {{ props.latestVersion }} が見つかりました</h3>
+        <a href="{{ props.downloadLink }}" target="_blank"
+          >ダウンロードページ</a
+        >
         <hr />
       </template>
       <h3>アップデート履歴</h3>
-      <template v-for="(info, infoIndex) of updateInfos" :key="infoIndex">
+      <template v-for="(info, infoIndex) of props.updateInfos" :key="infoIndex">
         <h3>バージョン {{ info.version }}</h3>
         <ul>
           <template
@@ -37,30 +39,16 @@
   </q-page>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
+<script setup lang="ts">
 import { UpdateInfo } from "../type/preload";
 
-export default defineComponent({
-  props: {
-    latestVersion: {
-      type: String,
-      required: false,
-    },
-    downloadLink: {
-      type: String,
-      required: false,
-    },
-    updateInfos: {
-      type: Array as PropType<UpdateInfo[]>,
-      required: false,
-    },
-    isUpdateAvailable: {
-      type: Boolean,
-      required: false,
-    },
-  },
-});
+const props =
+  defineProps<{
+    latestVersion: string;
+    downloadLink: string;
+    updateInfos: UpdateInfo[];
+    isUpdateAvailable: boolean;
+  }>();
 </script>
 
 <style scoped lang="scss">