From 1bc0434c0d81f4cd45d96874d0b8982d6e8c9175 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 1 Mar 2023 11:04:44 +0800
Subject: [PATCH] remove use of reactivity transform

---
 .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 543fbf6e..bc2e338b 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -687,9 +687,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 088801d7..ece80388 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 088d8bfd..d718b122 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 0b254cc1..e26375b6 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 85524e85..d7a2ff78 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 52d95ac4..9396d62f 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 708f809c..d32b445a 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 980972ce..42949eb2 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 d181773f..58f01003 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 643a62f4..026f7071 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 757feb43..97b90063 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 a40af093..25916309 100644
--- a/src/guide/built-ins/teleport.md
+++ b/src/guide/built-ins/teleport.md
@@ -116,7 +116,8 @@ The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM n
 You can click the button below and inspect the `<body>` tag via your browser's devtools:
 
 <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 41fb8749..d0987180 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 0248da29..871ef576 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 31ccde5b..f4d5c1e2 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 7f16160f..54d4f29d 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 6f9bb4b0..dba165e2 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 0d597114..9d2e3142 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 b2c75a7d..c1ee33c8 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 9236f9c9..be88661a 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 75489c1e..bfe576ad 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 0bd26b36..e31c6f49 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}
-
-Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the earlier "counter" example like this:
-
-```vue
-<script setup>
-let count = $ref(0)
-
-function increment() {
-  // no need for .value
-  count++
-}
-</script>
-
-<template>
-  <button @click="increment">{{ count }}</button>
-</template>
-```
-
-You can learn more about [Reactivity Transform](/guide/extras/reactivity-transform.html) in its dedicated section. Do note that it is currently still experimental and may change before being finalized.
-
-</div>
diff --git a/src/guide/extras/demos/Colors.vue b/src/guide/extras/demos/Colors.vue
index 69ee870a..37e87bbe 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 576945fd..b9cdfb3d 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 4ef17245..200beb62 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 69e98b67..4b43b782 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -97,23 +97,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
 
-Alternatively, you can use the currently experimental [Reactivity Transform](/guide/extras/reactivity-transform.html):
-
-```vue
-<script setup lang="ts">
-interface Props {
-  name: string
-  count?: number
-}
-
-// reactive destructure for defineProps()
-// default value is compiled to equivalent runtime option
-const { name, count = 100 } = defineProps<Props>()
-</script>
-```
-
-This behavior currently requires [explicit opt-in](/guide/extras/reactivity-transform.html#explicit-opt-in).
-
 ### Without `<script setup>` {#without-script-setup}
 
 If not using `<script setup>`, it is necessary to use `defineComponent()` to enable props type inference. The type of the props object passed to `setup()` is inferred from the `props` option.
diff --git a/src/partners/components/PartnerAll.vue b/src/partners/components/PartnerAll.vue
index f5d5fb22..d76ed51e 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 8049cb8c..c3dc8a8f 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 c51e492b..26a7cc42 100644
--- a/src/partners/components/PartnerHero.vue
+++ b/src/partners/components/PartnerHero.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const { title = 'Vue Partners' } = defineProps<{ title?: string }>()
+defineProps<{ title?: string }>()
 </script>
 
 <template>
   <div class="PartnerHero">
-    <h1 class="title">{{ title }}</h1>
+    <h1 class="title">{{ title || 'Vue Partners' }}</h1>
     <p class="lead">
       Vue Partners are Vue-team endorsed agencies that provide first-class
       Vue consulting and development services. If your company is
diff --git a/src/partners/components/PartnerLanding.vue b/src/partners/components/PartnerLanding.vue
index 2ecf5ca4..a8559732 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 30667fa4..0cf97630 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 c61b4da7..788ee1b6 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