From 4136c1b2b24d6f88c36b6a5ac782599ca0750527 Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Wed, 1 Mar 2023 19:28:47 +0900
Subject: [PATCH] remove use of reactivity transform (#1219)

---
 .vitepress/config.ts                          |  4 ---
 .vitepress/theme/components/Banner.vue        |  6 ++--
 .../theme/components/PreferenceSwitch.vue     | 10 +++----
 .vitepress/theme/components/SponsorsGroup.vue | 25 ++++++++++-------
 .vitepress/theme/components/VueJobs.vue       | 20 +++++++------
 .../theme/components/VueMasteryModal.vue      |  4 +--
 env.d.ts                                      |  1 -
 src/about/releases.md                         |  6 ++--
 .../built-ins/keep-alive-demos/CompA.vue      |  3 +-
 .../built-ins/keep-alive-demos/CompB.vue      |  3 +-
 .../keep-alive-demos/SwitchComponent.vue      |  5 ++--
 src/guide/built-ins/teleport.md               |  3 +-
 .../built-ins/transition-demos/Basic.vue      |  3 +-
 .../transition-demos/BetweenComponents.vue    |  4 +--
 .../transition-demos/BetweenElements.vue      |  6 ++--
 .../transition-demos/CssAnimation.vue         |  3 +-
 .../built-ins/transition-demos/JsHooks.vue    |  3 +-
 .../built-ins/transition-demos/ListMove.vue   | 11 ++++----
 .../transition-demos/ListStagger.vue          |  5 ++--
 .../transition-demos/NestedTransitions.vue    |  3 +-
 .../built-ins/transition-demos/SlideFade.vue  |  3 +-
 .../essentials/reactivity-fundamentals.md     | 25 -----------------
 src/guide/extras/demos/Colors.vue             |  7 +++--
 src/guide/extras/demos/DisabledButton.vue     |  8 ++++--
 src/guide/extras/demos/ElasticHeader.vue      | 18 ++++++------
 src/guide/typescript/composition-api.md       | 17 -----------
 src/partners/components/PartnerAll.vue        |  6 ++--
 src/partners/components/PartnerCard.vue       |  4 +--
 src/partners/components/PartnerHero.vue       |  4 +--
 src/partners/components/PartnerLanding.vue    |  9 +++---
 src/partners/components/PartnerList.vue       | 28 +++++++++++--------
 src/partners/components/PartnerPage.vue       |  4 +--
 32 files changed, 126 insertions(+), 135 deletions(-)

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index fdbb5ecaf..7cf30860b 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -721,9 +721,5 @@ export default defineConfigWithTheme<ThemeConfig>({
     json: {
       stringify: true
     }
-  },
-
-  vue: {
-    reactivityTransform: true
   }
 })
diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue
index 088801d7d..ece803888 100644
--- a/.vitepress/theme/components/Banner.vue
+++ b/.vitepress/theme/components/Banner.vue
@@ -5,13 +5,15 @@
  * 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
  * 3. update --vt-banner-height if necessary
  */
+import { ref } from 'vue'
+
+const open = ref(true)
 
-let open = $ref(true)
 /**
  * Call this if the banner is dismissible
  */
 function dismiss() {
-  open = false
+  open.value = false
   document.documentElement.classList.add('banner-dismissed')
   localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
 }
diff --git a/.vitepress/theme/components/PreferenceSwitch.vue b/.vitepress/theme/components/PreferenceSwitch.vue
index 2c2590abc..2318444df 100644
--- a/.vitepress/theme/components/PreferenceSwitch.vue
+++ b/.vitepress/theme/components/PreferenceSwitch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VTSwitch, VTIconChevronDown } from '@vue/theme'
 import { useRoute } from 'vitepress'
-import { inject, Ref } from 'vue'
+import { ref, computed, inject, Ref } from 'vue'
 import {
   preferCompositionKey,
   preferComposition,
@@ -10,15 +10,15 @@ import {
 } from './preferences'
 
 const route = useRoute()
-const show = $computed(() =>
+const show = computed(() =>
   /^\/(guide|tutorial|examples|style-guide)\//.test(route.path)
 )
-const showSFC = $computed(() => !/^\/guide|style-guide/.test(route.path))
+const showSFC = computed(() => !/^\/guide|style-guide/.test(route.path))
 
-let isOpen = $ref(true)
+let isOpen = ref(true)
 
 const toggleOpen = () => {
-  isOpen = !isOpen
+  isOpen.value = !isOpen.value
 }
 
 const removeOutline = (e: Event) => {
diff --git a/.vitepress/theme/components/SponsorsGroup.vue b/.vitepress/theme/components/SponsorsGroup.vue
index 4dbcdbf4c..e92cdaa3f 100644
--- a/.vitepress/theme/components/SponsorsGroup.vue
+++ b/.vitepress/theme/components/SponsorsGroup.vue
@@ -1,29 +1,34 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { SponsorData, data, base, load } from './sponsors'
 
 type Placement = 'aside' | 'page' | 'landing'
 
-const { tier, placement = 'aside' } = defineProps<{
-  tier: keyof SponsorData
-  placement?: Placement
-}>()
+const props = withDefaults(
+  defineProps<{
+    tier: keyof SponsorData
+    placement?: Placement
+  }>(),
+  {
+    placement: 'aside'
+  }
+)
 
-let container = $ref<HTMLElement>()
-let visible = $ref(false)
+const container = ref<HTMLElement>()
+const visible = ref(false)
 
 onMounted(async () => {
   // only render when entering view
   const observer = new IntersectionObserver(
     (entries) => {
       if (entries[0].isIntersecting) {
-        visible = true
+        visible.value = true
         observer.disconnect()
       }
     },
     { rootMargin: '0px 0px 300px 0px' }
   )
-  observer.observe(container!)
+  observer.observe(container.value!)
   onUnmounted(() => observer.disconnect())
 
   // load data
@@ -38,7 +43,7 @@ const eventMap: Record<Placement, string> = {
 }
 
 function track(interest?: boolean) {
-  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[placement], 0)
+  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[props.placement], 0)
 }
 </script>
 
diff --git a/.vitepress/theme/components/VueJobs.vue b/.vitepress/theme/components/VueJobs.vue
index 85524e859..d7a2ff78f 100644
--- a/.vitepress/theme/components/VueJobs.vue
+++ b/.vitepress/theme/components/VueJobs.vue
@@ -1,8 +1,10 @@
 <script lang="ts">
+import { ref } from 'vue'
+
 // shared data across instances so we load only once
 const base = 'https://app.vuejobs.com/feed/vuejs/docs?format=json'
 
-let items = $ref<Jobs[]>([])
+const items = ref<Jobs[]>([])
 
 type Jobs = {
   organization: Organization
@@ -21,19 +23,19 @@ type Organization = {
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
 
-let vuejobs = $ref<HTMLElement>()
-
 const openings = computed(() =>
-  items.sort(() => 0.5 - Math.random()).slice(0, 2)
+  items.value.sort(() => 0.5 - Math.random()).slice(0, 2)
 )
 
 onMounted(async () => {
-  if (!items.length) items = (await (await fetch(`${base}`)).json()).data
+  if (!items.value.length) {
+    items.value = (await (await fetch(`${base}`)).json()).data
+  }
 })
 </script>
 
 <template>
-  <div class="vuejobs-wrapper" ref="vuejobs">
+  <div class="vuejobs-wrapper">
     <div class="vj-container">
       <a
         class="vj-item"
@@ -45,7 +47,8 @@ onMounted(async () => {
         <div class="vj-company-logo">
           <img
             :src="job.organization.avatar"
-            :alt="`Logo for ${job.organization.name}`" />
+            :alt="`Logo for ${job.organization.name}`"
+          />
         </div>
         <div
           style="
@@ -53,7 +56,8 @@ onMounted(async () => {
             display: flex;
             flex-direction: column;
             justify-content: center;
-          ">
+          "
+        >
           <div class="vj-job-title">{{ job.title }}</div>
           <div class="vj-job-info">
             {{ job.organization.name }} <span>· </span>
diff --git a/.vitepress/theme/components/VueMasteryModal.vue b/.vitepress/theme/components/VueMasteryModal.vue
index 946e55469..a2dbe577c 100644
--- a/.vitepress/theme/components/VueMasteryModal.vue
+++ b/.vitepress/theme/components/VueMasteryModal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const VIDEO_SOURCE = 'https://player.vimeo.com/video/647441538?autoplay=1'
-let showWhyVue: boolean = $ref(false)
+const showWhyVue = ref(false)
 
 watch(
   () => showWhyVue,
diff --git a/env.d.ts b/env.d.ts
index 708f809c7..d32b445ae 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="vitepress/client" />
-/// <reference types="vue/macros-global" />
 
 declare module '@vue/theme/config' {
   import { UserConfig } from 'vitepress'
diff --git a/src/about/releases.md b/src/about/releases.md
index 2fa4aa47e..a7959cd26 100644
--- a/src/about/releases.md
+++ b/src/about/releases.md
@@ -3,13 +3,13 @@ outline: deep
 ---
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
-let version = $ref()
+const version = ref()
 
 onMounted(async () => {
   const res = await fetch('https://api.github.com/repos/vuejs/core/releases?per_page=1')
-  version = (await res.json())[0].name
+  version.value = (await res.json())[0].name
 })
 </script>
 
diff --git a/src/guide/built-ins/keep-alive-demos/CompA.vue b/src/guide/built-ins/keep-alive-demos/CompA.vue
index d181773f0..58f01003a 100644
--- a/src/guide/built-ins/keep-alive-demos/CompA.vue
+++ b/src/guide/built-ins/keep-alive-demos/CompA.vue
@@ -1,5 +1,6 @@
 <script setup>
-let count = $ref(0)
+import { ref } from 'vue'
+const count = ref(0)
 </script>
 
 <template>
diff --git a/src/guide/built-ins/keep-alive-demos/CompB.vue b/src/guide/built-ins/keep-alive-demos/CompB.vue
index 643a62f4c..026f70717 100644
--- a/src/guide/built-ins/keep-alive-demos/CompB.vue
+++ b/src/guide/built-ins/keep-alive-demos/CompB.vue
@@ -1,5 +1,6 @@
 <script setup>
-let msg = $ref('')
+import { ref } from 'vue'
+const msg = ref('')
 </script>
 
 <template>
diff --git a/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue b/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue
index 757feb43e..97b900632 100644
--- a/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue
+++ b/src/guide/built-ins/keep-alive-demos/SwitchComponent.vue
@@ -1,10 +1,11 @@
 <script setup>
+import { shallowRef } from 'vue'
 import CompA from './CompA.vue'
 import CompB from './CompB.vue'
 
-let current = $shallowRef(CompA)
+const current = shallowRef(CompA)
 
-const { useKeepAlive } = defineProps({ useKeepAlive: Boolean })
+defineProps({ useKeepAlive: Boolean })
 </script>
 
 <template>
diff --git a/src/guide/built-ins/teleport.md b/src/guide/built-ins/teleport.md
index 8a2855b5c..f2294d590 100644
--- a/src/guide/built-ins/teleport.md
+++ b/src/guide/built-ins/teleport.md
@@ -116,7 +116,8 @@ export default {
 下のボタンをクリックして、ブラウザーの devtools で `<body>` タグを検査できます:
 
 <script setup>
-let open = $ref(false)
+import { ref } from 'vue'
+const open = ref(false)
 </script>
 
 <div class="demo">
diff --git a/src/guide/built-ins/transition-demos/Basic.vue b/src/guide/built-ins/transition-demos/Basic.vue
index 41fb87497..d09871802 100644
--- a/src/guide/built-ins/transition-demos/Basic.vue
+++ b/src/guide/built-ins/transition-demos/Basic.vue
@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>
diff --git a/src/guide/built-ins/transition-demos/BetweenComponents.vue b/src/guide/built-ins/transition-demos/BetweenComponents.vue
index 0248da291..871ef5761 100644
--- a/src/guide/built-ins/transition-demos/BetweenComponents.vue
+++ b/src/guide/built-ins/transition-demos/BetweenComponents.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 const CompA = () => h('div', 'Component A')
 const CompB = () => h('div', 'Component B')
 
-let activeComponent = $ref(CompA)
+const activeComponent = ref(CompA)
 </script>
 
 <template>
diff --git a/src/guide/built-ins/transition-demos/BetweenElements.vue b/src/guide/built-ins/transition-demos/BetweenElements.vue
index 31ccde5b3..f4d5c1e20 100644
--- a/src/guide/built-ins/transition-demos/BetweenElements.vue
+++ b/src/guide/built-ins/transition-demos/BetweenElements.vue
@@ -1,7 +1,9 @@
 <script setup>
-const { mode } = defineProps(['mode'])
+import { ref } from 'vue'
 
-let docState = $ref('saved')
+defineProps(['mode'])
+
+const docState = ref('saved')
 </script>
 
 <template>
diff --git a/src/guide/built-ins/transition-demos/CssAnimation.vue b/src/guide/built-ins/transition-demos/CssAnimation.vue
index 7f16160fb..54d4f29df 100644
--- a/src/guide/built-ins/transition-demos/CssAnimation.vue
+++ b/src/guide/built-ins/transition-demos/CssAnimation.vue
@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>
diff --git a/src/guide/built-ins/transition-demos/JsHooks.vue b/src/guide/built-ins/transition-demos/JsHooks.vue
index 6f9bb4b03..dba165e24 100644
--- a/src/guide/built-ins/transition-demos/JsHooks.vue
+++ b/src/guide/built-ins/transition-demos/JsHooks.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { ref } from 'vue'
 import gsap from 'gsap'
 
-let show = $ref(true)
+const show = ref(true)
 
 function onBeforeEnter(el) {
   gsap.set(el, {
diff --git a/src/guide/built-ins/transition-demos/ListMove.vue b/src/guide/built-ins/transition-demos/ListMove.vue
index 0d597114a..9d2e31423 100644
--- a/src/guide/built-ins/transition-demos/ListMove.vue
+++ b/src/guide/built-ins/transition-demos/ListMove.vue
@@ -1,17 +1,18 @@
 <script setup>
-let items = $ref([1, 2, 3, 4, 5])
-let nextNum = items.length + 1
+import { ref } from 'vue'
+const items = ref([1, 2, 3, 4, 5])
+let nextNum = items.value.length + 1
 
 function add() {
-  items.splice(randomIndex(), 0, nextNum++)
+  items.value.splice(randomIndex(), 0, nextNum++)
 }
 
 function remove() {
-  items.splice(randomIndex(), 1)
+  items.value.splice(randomIndex(), 1)
 }
 
 function randomIndex() {
-  return Math.floor(Math.random() * items.length)
+  return Math.floor(Math.random() * items.value.length)
 }
 
 function shuffle(array) {
diff --git a/src/guide/built-ins/transition-demos/ListStagger.vue b/src/guide/built-ins/transition-demos/ListStagger.vue
index b2c75a7d8..c1ee33c82 100644
--- a/src/guide/built-ins/transition-demos/ListStagger.vue
+++ b/src/guide/built-ins/transition-demos/ListStagger.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed } from 'vue'
 import gsap from 'gsap'
 
 const list = [
@@ -9,9 +10,9 @@ const list = [
   { msg: 'Kung Fury' }
 ]
 
-let query = $ref('')
+const query = ref('')
 
-const computedList = $computed(() => {
+const computedList = computed(() => {
   return list.filter((item) => item.msg.toLowerCase().includes(query))
 })
 
diff --git a/src/guide/built-ins/transition-demos/NestedTransitions.vue b/src/guide/built-ins/transition-demos/NestedTransitions.vue
index 9236f9c96..be88661a1 100644
--- a/src/guide/built-ins/transition-demos/NestedTransitions.vue
+++ b/src/guide/built-ins/transition-demos/NestedTransitions.vue
@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>
diff --git a/src/guide/built-ins/transition-demos/SlideFade.vue b/src/guide/built-ins/transition-demos/SlideFade.vue
index 75489c1e4..bfe576ad2 100644
--- a/src/guide/built-ins/transition-demos/SlideFade.vue
+++ b/src/guide/built-ins/transition-demos/SlideFade.vue
@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>
diff --git a/src/guide/essentials/reactivity-fundamentals.md b/src/guide/essentials/reactivity-fundamentals.md
index c9a271ee2..2ea74ead6 100644
--- a/src/guide/essentials/reactivity-fundamentals.md
+++ b/src/guide/essentials/reactivity-fundamentals.md
@@ -573,28 +573,3 @@ export default {
 ```
 
 </div>
-
-<div class="composition-api">
-
-## Reactivity Transform <sup class="vt-badge experimental" /> \*\* {#reactivity-transform}
-
-Ref で `.value` を使わなければならないのは、JavaScript の言語的な制約による欠点です。しかし、コンパイル時の変換 (ここでいうコンパイル時とは SFC を JavaScript コードへ変換する時) を利用すれば、適切な場所に自動的に `.value` を追加して人間工学を改善することができます。Vue はコンパイル時の変換を提供しており、先ほどの「カウンター」の例をこのように記述することができます。
-
-```vue
-<script setup>
-let count = $ref(0)
-
-function increment() {
-  // ここでは .value が不要です
-  count++
-}
-</script>
-
-<template>
-  <button @click="increment">{{ count }}</button>
-</template>
-```
-
-[Reactivity Transform](/guide/extras/reactivity-transform.html) の詳細については、専用のセクションで説明されています。ただし、現在はまだ実験的なものであり、最終的に完成するまでに変更される可能性があることに注意してください。
-
-</div>
diff --git a/src/guide/extras/demos/Colors.vue b/src/guide/extras/demos/Colors.vue
index 69ee870a8..37e87bbef 100644
--- a/src/guide/extras/demos/Colors.vue
+++ b/src/guide/extras/demos/Colors.vue
@@ -1,7 +1,10 @@
 <script setup>
-let x = $ref(0)
+import { ref } from 'vue'
+
+const x = ref(0)
+
 function onMousemove(e) {
-  x = e.clientX
+  x.value = e.clientX
 }
 </script>
 
diff --git a/src/guide/extras/demos/DisabledButton.vue b/src/guide/extras/demos/DisabledButton.vue
index 576945fd2..b9cdfb3d4 100644
--- a/src/guide/extras/demos/DisabledButton.vue
+++ b/src/guide/extras/demos/DisabledButton.vue
@@ -1,10 +1,12 @@
 <script setup>
-let notActivated = $ref(false)
+import { ref } from 'vue'
+
+const notActivated = ref(false)
 
 function warnNotActivated() {
-  notActivated = true
+  notActivated.value = true
   setTimeout(() => {
-    notActivated = false
+    notActivated.value = false
   }, 1500)
 }
 </script>
diff --git a/src/guide/extras/demos/ElasticHeader.vue b/src/guide/extras/demos/ElasticHeader.vue
index 4ef172459..200beb622 100644
--- a/src/guide/extras/demos/ElasticHeader.vue
+++ b/src/guide/extras/demos/ElasticHeader.vue
@@ -1,18 +1,20 @@
 <script setup>
+import { ref, computed } from 'vue'
 import dynamics from 'dynamics.js'
 
 const headerHeight = 120
 
 let isDragging = false
 const start = { x: 0, y: 0 }
-let c = $ref({ x: headerHeight, y: headerHeight })
+const x = ref(headerHeight)
+const y = ref(headerHeight)
 
-const headerPath = $computed(() => {
-  return `M0,0 L320,0 320,${headerHeight}Q${c.x},${c.y} 0,${headerHeight}`
+const headerPath = computed(() => {
+  return `M0,0 L320,0 320,${headerHeight}Q${x.value},${y.value} 0,${headerHeight}`
 })
 
-const contentPosition = $computed(() => {
-  const dy = c.y - headerHeight
+const contentPosition = computed(() => {
+  const dy = y.value - headerHeight
   const dampen = dy > 0 ? 2 : 4
   return {
     transform: `translate(0,${dy / dampen}px)`
@@ -29,10 +31,10 @@ function startDrag(e) {
 function onDrag(e) {
   e = e.changedTouches ? e.changedTouches[0] : e
   if (isDragging) {
-    c.x = headerHeight + (e.pageX - start.x)
+    x.value = headerHeight + (e.pageX - start.x)
     const dy = e.pageY - start.y
     const dampen = dy > 0 ? 1.5 : 4
-    c.y = headerHeight + dy / dampen
+    y.value = headerHeight + dy / dampen
   }
 }
 
@@ -40,7 +42,7 @@ function stopDrag() {
   if (isDragging) {
     isDragging = false
     dynamics.animate(
-      c,
+      { x: x.value, y: y.value },
       { x: headerHeight, y: headerHeight },
       { type: dynamics.spring, duration: 700, firction: 280 }
     )
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index df3d6a686..e81ee2ef7 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -97,23 +97,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 これは、実行時のプロパティの `default` オプションと同等にコンパイルされます。さらに、`withDefaults` ヘルパーはデフォルト値の型チェックを提供し、戻り値の `props` の型からはデフォルト値が宣言されているプロパティのオプションフラグが削除されていることを保証します。
 
-また、現在実験的な機能である [Reactivity Transform](/guide/extras/reactivity-transform.html) を使用することもできます:
-
-```vue
-<script setup lang="ts">
-interface Props {
-  name: string
-  count?: number
-}
-
-// defineProps() のリアクティブな分割代入
-// デフォルト値は、同等の実行時オプションにコンパイルされる
-const { name, count = 100 } = defineProps<Props>()
-</script>
-```
-
-こちらの振る舞いを利用するには [明示的なオプトイン](/guide/extras/reactivity-transform.html#explicit-opt-in) が必要です。
-
 ### `<script setup>` を使用しない場合 {#without-script-setup}
 
 `<script setup>` を使用しない場合、 `defineComponent()` を使用して、プロパティの型推論をする必要があります。`setup()` に渡された変数 props の型は、`props` オプションから推論されます。
diff --git a/src/partners/components/PartnerAll.vue b/src/partners/components/PartnerAll.vue
index e3b148a6f..781530221 100644
--- a/src/partners/components/PartnerAll.vue
+++ b/src/partners/components/PartnerAll.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import PartnerHero from './PartnerHero.vue'
 import PartnerList from './PartnerList.vue'
 import PartnerJoin from './PartnerJoin.vue'
 import { Partner } from './type'
 import { VTIconSearch } from '@vue/theme'
 
-let query = $ref('')
+const query = ref('')
 
 function filter(p: Partner): boolean {
   return (
-    includes(p.name, query) || p.region.some((r) => includes(r, query))
+    includes(p.name, query.value) ||
+    p.region.some((r) => includes(r, query.value))
   )
 }
 
diff --git a/src/partners/components/PartnerCard.vue b/src/partners/components/PartnerCard.vue
index 8049cb8c0..c3dc8a8f9 100644
--- a/src/partners/components/PartnerCard.vue
+++ b/src/partners/components/PartnerCard.vue
@@ -3,7 +3,7 @@ import { Partner } from './type'
 import { normalizeName, getHero, getLogo, track } from './utils'
 import Location from './PartnerLocation.vue'
 
-const { data, hero, page } = defineProps<{
+const props = defineProps<{
   data: Partner
   hero?: boolean
   page?: boolean
@@ -18,7 +18,7 @@ const {
   proficiencies,
   flipLogo,
   website
-} = data
+} = props.data
 </script>
 
 <template>
diff --git a/src/partners/components/PartnerHero.vue b/src/partners/components/PartnerHero.vue
index 75853790d..ddc11f3fd 100644
--- a/src/partners/components/PartnerHero.vue
+++ b/src/partners/components/PartnerHero.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const { title = 'Vue パートナー' } = defineProps<{ title?: string }>()
+defineProps<{ title?: string }>()
 </script>
 
 <template>
   <div class="PartnerHero">
-    <h1 class="title">{{ title }}</h1>
+    <h1 class="title">{{ title || 'Vue パートナー' }}</h1>
     <p class="lead">
       Vue パートナーは、一流の Vue コンサルティングおよび
       開発サービスを提供する、Vue チーム推奨の代理店です。
diff --git a/src/partners/components/PartnerLanding.vue b/src/partners/components/PartnerLanding.vue
index 1592e54f3..dae70e254 100644
--- a/src/partners/components/PartnerLanding.vue
+++ b/src/partners/components/PartnerLanding.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import PartnerHero from './PartnerHero.vue'
 import PartnerCard from './PartnerCard.vue'
 import PartnerList from './PartnerList.vue'
@@ -7,11 +7,11 @@ import PartnerJoin from './PartnerJoin.vue'
 import data from '../partners.json'
 import { Partner } from './type'
 
-let spotlighted = $ref<Partner | null>(null)
+const spotlighted = ref<Partner | null>(null)
 
 onMounted(() => {
   const plat = (data as Partner[]).filter((d) => d.platinum)
-  spotlighted = plat[Math.floor(Math.random() * plat.length)]
+  spotlighted.value = plat[Math.floor(Math.random() * plat.length)]
 })
 </script>
 
@@ -83,7 +83,8 @@ h2 {
 }
 
 @media (max-width: 768px) {
-  .spotlight-inner, .featured {
+  .spotlight-inner,
+  .featured {
     padding: 36px 28px;
   }
 }
diff --git a/src/partners/components/PartnerList.vue b/src/partners/components/PartnerList.vue
index 30667fa4c..0cf976304 100644
--- a/src/partners/components/PartnerList.vue
+++ b/src/partners/components/PartnerList.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
 import partnersRaw from '../partners.json'
-import { computed, onMounted } from 'vue'
+import { ref, shallowRef, computed, onMounted } from 'vue'
 import PartnerCard from './PartnerCard.vue'
 import { Partner } from './type'
 
-const { filter, showLinkToAll } = defineProps<{
+const props = defineProps<{
   filter?: (p: Partner) => boolean | undefined
   showLinkToAll?: boolean
 }>()
 
-let mounted = $ref(false)
-let partners = $shallowRef(partnersRaw)
+const mounted = ref(false)
+const partners = shallowRef(partnersRaw as Partner[])
 
 const filtered = computed(() =>
-  filter ? (partners as Partner[]).filter(filter) : (partners as Partner[])
+  props.filter ? partners.value.filter(props.filter) : partners.value
 )
 
 onMounted(() => {
-  mounted = true
-  const platinum = partners.filter((p) => p.platinum)
+  mounted.value = true
+  const platinum = partners.value.filter((p) => p.platinum)
   shuffle(platinum)
-  const normal = partners.filter((p) => !p.platinum)
+  const normal = partners.value.filter((p) => !p.platinum)
   shuffle(normal)
-  partners = [...platinum, ...normal]
+  partners.value = [...platinum, ...normal]
 })
 
 function shuffle(array: Array<any>) {
@@ -50,8 +50,12 @@ function shuffle(array: Array<any>) {
     <ClientOnly>
       <PartnerCard v-for="p in filtered" :key="p.name" :data="p" />
     </ClientOnly>
-    <a class="browse-all" href="./all.html" v-if="showLinkToAll && filtered.length % 2">
-      Browse and Search<br>All Partners
+    <a
+      class="browse-all"
+      href="./all.html"
+      v-if="showLinkToAll && filtered.length % 2"
+    >
+      Browse and Search<br />All Partners
     </a>
   </div>
 </template>
@@ -65,7 +69,7 @@ function shuffle(array: Array<any>) {
 
 .browse-all {
   color: var(--vt-c-text-2);
-  transition: color .5s ease;
+  transition: color 0.5s ease;
   font-size: 1.2em;
   text-align: center;
   padding-top: 240px;
diff --git a/src/partners/components/PartnerPage.vue b/src/partners/components/PartnerPage.vue
index 114280c9b..73108a303 100644
--- a/src/partners/components/PartnerPage.vue
+++ b/src/partners/components/PartnerPage.vue
@@ -5,12 +5,12 @@ import { normalizeName, track } from './utils'
 import PartnerCard from './PartnerCard.vue'
 import { VTIconChevronLeft } from '@vue/theme'
 
-const { partner } = defineProps<{
+const props = defineProps<{
   partner: string
 }>()
 
 const p = (data as Partner[]).find(
-  (p) => normalizeName(p.name) === partner
+  (p) => normalizeName(p.name) === props.partner
 )!
 
 const { name, description, hiring, contact, website } = p