From 5ca6a8c8786b67eb14a7078ebffb64794935752c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Mar 2026 14:23:14 +0000
Subject: [PATCH 1/4] fix: do not invoke slots in computed functions

---
 src/runtime/components/prose/Accordion.vue | 18 ++++++++++++------
 src/runtime/components/prose/CodeGroup.vue | 18 ++++++++++++------
 src/runtime/components/prose/CodeTree.vue  | 20 +++++++++++++-------
 src/runtime/components/prose/Tabs.vue      | 18 ++++++++++++------
 4 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index 6c409ed52a..48ab6c482a 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -18,7 +18,7 @@ export interface ProseAccordionSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, onBeforeUpdate } from 'vue'
+import { computed, onMounted, onBeforeUpdate, shallowRef } from 'vue'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
 import { transformUI } from '../../utils'
@@ -36,7 +36,10 @@ const uiProp = useComponentUI('prose.accordion', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.accordion || {}) }))
 
-const rerenderCount = ref(1)
+// Collect slot children in a shallowRef so they are resolved during render lifecycle
+// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// "[Vue warn]: Slot "default" invoked outside of the render function"
+const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
 
 const items = computed<{
   index: number
@@ -44,9 +47,7 @@ const items = computed<{
   icon: string
   component: any
 }[]>(() => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  rerenderCount.value
-  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
 })
 
 function transformSlot(slot: any, index: number) {
@@ -63,7 +64,12 @@ function transformSlot(slot: any, index: number) {
   }
 }
 
-onBeforeUpdate(() => rerenderCount.value++)
+onMounted(() => {
+  slotChildren.value = slots.default?.()
+})
+onBeforeUpdate(() => {
+  slotChildren.value = slots.default?.()
+})
 </script>
 
 <template>
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 49733f481d..e0259360a6 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -25,7 +25,7 @@ export interface ProseCodeGroupSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
+import { computed, watch, onMounted, onBeforeUpdate, shallowRef } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'reka-ui'
 import { useState, useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
@@ -45,7 +45,10 @@ const uiProp = useComponentUI('prose.codeGroup', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeGroup || {}) })())
 
-const rerenderCount = ref(1)
+// Collect slot children in a shallowRef so they are resolved during render lifecycle
+// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// "[Vue warn]: Slot "default" invoked outside of the render function"
+const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
 
 const items = computed<{
   index: number
@@ -53,9 +56,7 @@ const items = computed<{
   icon: string
   component: any
 }[]>(() => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  rerenderCount.value
-  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
 })
 
 function transformSlot(slot: any, index: number) {
@@ -90,7 +91,12 @@ onMounted(() => {
   }
 })
 
-onBeforeUpdate(() => rerenderCount.value++)
+onMounted(() => {
+  slotChildren.value = slots.default?.()
+})
+onBeforeUpdate(() => {
+  slotChildren.value = slots.default?.()
+})
 </script>
 
 <template>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index 4464ebd2e3..ce9d615e2d 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -48,7 +48,7 @@ export interface ProseCodeTreeSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onBeforeUpdate, ref } from 'vue'
+import { computed, watch, onBeforeUpdate, onMounted, ref, shallowRef } from 'vue'
 import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -92,12 +92,13 @@ watch(() => props.modelValue, (value) => {
     }
   }
 })
-const rerenderCount = ref(1)
+// Collect slot children in a shallowRef so they are resolved during render lifecycle
+// hooks (onBeforeUpdate) rather than inside computed, which would trigger:
+// "[Vue warn]: Slot "default" invoked outside of the render function"
+const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
 
 const flatItems = computed<TreeItem[]>(() => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  rerenderCount.value
-  return props.items || slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  return props.items || slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
 })
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -173,7 +174,7 @@ const expanded = ref(getExpandedPaths(model.value?.path))
 watch(flatItems, (newItems, oldItems) => {
   if (!props.expandAll) return
 
-  // Compare labels to detect actual changes (not just re-renders from rerenderCount)
+  // Compare labels to detect actual changes (not just re-renders from slot re-evaluation)
   const newLabels = newItems.map(i => i.label).join('\n')
   const oldLabels = oldItems?.map(i => i.label).join('\n') ?? ''
 
@@ -189,7 +190,12 @@ watch(model, (value) => {
   }
 }, { immediate: true })
 
-onBeforeUpdate(() => rerenderCount.value++)
+onMounted(() => {
+  slotChildren.value = slots.default?.()
+})
+onBeforeUpdate(() => {
+  slotChildren.value = slots.default?.()
+})
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index ff4f4f3de1..396285e02e 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -30,7 +30,7 @@ export interface ProseTabsSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, ref, onBeforeUpdate } from 'vue'
+import { computed, watch, onMounted, onBeforeUpdate, shallowRef } from 'vue'
 import { useState, useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
 import { transformUI } from '../../utils'
@@ -50,7 +50,10 @@ const uiProp = useComponentUI('prose.tabs', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tabs || {}) }))
 
-const rerenderCount = ref(1)
+// Collect slot children in a shallowRef so they are resolved during render lifecycle
+// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// "[Vue warn]: Slot "default" invoked outside of the render function"
+const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
 
 const items = computed<{
   index: number
@@ -58,9 +61,7 @@ const items = computed<{
   icon: string
   component: any
 }[]>(() => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-  rerenderCount.value
-  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
 })
 
 function transformSlot(slot: any, index: number) {
@@ -106,7 +107,12 @@ async function onUpdateModelValue() {
   }
 }
 
-onBeforeUpdate(() => rerenderCount.value++)
+onMounted(() => {
+  slotChildren.value = slots.default?.()
+})
+onBeforeUpdate(() => {
+  slotChildren.value = slots.default?.()
+})
 </script>
 
 <template>

From 6d7a62fd28dd2cff166402805da3ceffafb19597 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Mar 2026 16:09:57 +0000
Subject: [PATCH 2/4] fix: don't invoke in onMounted either

---
 src/runtime/components/prose/Accordion.vue | 12 +++++-------
 src/runtime/components/prose/CodeGroup.vue | 10 ++++------
 src/runtime/components/prose/CodeTree.vue  | 12 +++++-------
 src/runtime/components/prose/Tabs.vue      | 10 ++++------
 4 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index 48ab6c482a..f3e4d3df15 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -18,7 +18,7 @@ export interface ProseAccordionSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, onBeforeUpdate, shallowRef } from 'vue'
+import { computed, onBeforeUpdate, shallowRef } from 'vue'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
 import { transformUI } from '../../utils'
@@ -36,10 +36,11 @@ const uiProp = useComponentUI('prose.accordion', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.accordion || {}) }))
 
-// Collect slot children in a shallowRef so they are resolved during render lifecycle
-// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
+// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
+// computed, which would trigger:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
+const slotChildren = shallowRef(slots.default?.())
 
 const items = computed<{
   index: number
@@ -64,9 +65,6 @@ function transformSlot(slot: any, index: number) {
   }
 }
 
-onMounted(() => {
-  slotChildren.value = slots.default?.()
-})
 onBeforeUpdate(() => {
   slotChildren.value = slots.default?.()
 })
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index e0259360a6..3782408097 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -45,10 +45,11 @@ const uiProp = useComponentUI('prose.codeGroup', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeGroup || {}) })())
 
-// Collect slot children in a shallowRef so they are resolved during render lifecycle
-// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
+// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
+// computed, which would trigger:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
+const slotChildren = shallowRef(slots.default?.())
 
 const items = computed<{
   index: number
@@ -91,9 +92,6 @@ onMounted(() => {
   }
 })
 
-onMounted(() => {
-  slotChildren.value = slots.default?.()
-})
 onBeforeUpdate(() => {
   slotChildren.value = slots.default?.()
 })
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index ce9d615e2d..1652389b44 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -48,7 +48,7 @@ export interface ProseCodeTreeSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onBeforeUpdate, onMounted, ref, shallowRef } from 'vue'
+import { computed, watch, onBeforeUpdate, ref, shallowRef } from 'vue'
 import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -92,10 +92,11 @@ watch(() => props.modelValue, (value) => {
     }
   }
 })
-// Collect slot children in a shallowRef so they are resolved during render lifecycle
-// hooks (onBeforeUpdate) rather than inside computed, which would trigger:
+// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
+// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
+// computed, which would trigger:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
+const slotChildren = shallowRef(slots.default?.())
 
 const flatItems = computed<TreeItem[]>(() => {
   return props.items || slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
@@ -190,9 +191,6 @@ watch(model, (value) => {
   }
 }, { immediate: true })
 
-onMounted(() => {
-  slotChildren.value = slots.default?.()
-})
 onBeforeUpdate(() => {
   slotChildren.value = slots.default?.()
 })
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index 396285e02e..3c77ca8a3a 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -50,10 +50,11 @@ const uiProp = useComponentUI('prose.tabs', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tabs || {}) }))
 
-// Collect slot children in a shallowRef so they are resolved during render lifecycle
-// hooks (onMounted/onBeforeUpdate) rather than inside computed, which would trigger:
+// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
+// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
+// computed, which would trigger:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef<ReturnType<typeof slots.default>>()
+const slotChildren = shallowRef(slots.default?.())
 
 const items = computed<{
   index: number
@@ -107,9 +108,6 @@ async function onUpdateModelValue() {
   }
 }
 
-onMounted(() => {
-  slotChildren.value = slots.default?.()
-})
 onBeforeUpdate(() => {
   slotChildren.value = slots.default?.()
 })

From e5926084a04458f5d00e409c17c80d401390d307 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Mar 2026 17:07:52 +0000
Subject: [PATCH 3/4] fix: use getter functions for collecting slots

---
 src/runtime/components/prose/Accordion.vue | 28 +++-------
 src/runtime/components/prose/CodeGroup.vue | 31 ++++-------
 src/runtime/components/prose/CodeTree.vue  | 65 +++++++++++-----------
 src/runtime/components/prose/Tabs.vue      | 28 +++-------
 4 files changed, 61 insertions(+), 91 deletions(-)

diff --git a/src/runtime/components/prose/Accordion.vue b/src/runtime/components/prose/Accordion.vue
index f3e4d3df15..02f39309da 100644
--- a/src/runtime/components/prose/Accordion.vue
+++ b/src/runtime/components/prose/Accordion.vue
@@ -18,7 +18,7 @@ export interface ProseAccordionSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUpdate, shallowRef } from 'vue'
+import { computed } from 'vue'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
 import { transformUI } from '../../utils'
@@ -36,20 +36,12 @@ const uiProp = useComponentUI('prose.accordion', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.accordion || {}) }))
 
-// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
-// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
-// computed, which would trigger:
-// "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef(slots.default?.())
-
-const items = computed<{
-  index: number
-  label: string
-  icon: string
-  component: any
-}[]>(() => {
-  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
-})
+// Slot children are collected and transformed via getItems(), called from the template
+// (render function). This ensures slots.default?.() is invoked during the render phase,
+// avoiding: "[Vue warn]: Slot "default" invoked outside of the render function"
+function getItems() {
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+}
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === 'symbol') {
@@ -64,14 +56,10 @@ function transformSlot(slot: any, index: number) {
     component: slot
   }
 }
-
-onBeforeUpdate(() => {
-  slotChildren.value = slots.default?.()
-})
 </script>
 
 <template>
-  <UAccordion :type="type" :items="items" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), uiProp)">
+  <UAccordion :type="type" :items="getItems()" :unmount-on-hide="false" :class="props.class" :ui="transformUI(ui(), uiProp)">
     <template #content="{ item }">
       <component :is="item.component" />
     </template>
diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 3782408097..3ff49db947 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -25,7 +25,7 @@ export interface ProseCodeGroupSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, onBeforeUpdate, shallowRef } from 'vue'
+import { computed, watch, onMounted } from 'vue'
 import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'reka-ui'
 import { useState, useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
@@ -45,20 +45,15 @@ const uiProp = useComponentUI('prose.codeGroup', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeGroup || {}) })())
 
-// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
-// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
-// computed, which would trigger:
-// "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef(slots.default?.())
-
-const items = computed<{
-  index: number
-  label: string
-  icon: string
-  component: any
-}[]>(() => {
-  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
-})
+// Slot children are collected and transformed via getItems(), called from the template
+// (render function). This ensures slots.default?.() is invoked during the render phase,
+// avoiding: "[Vue warn]: Slot "default" invoked outside of the render function"
+let items: { label: string, icon: string, component: any }[] = []
+
+function getItems() {
+  items = slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  return items
+}
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === 'symbol') {
@@ -91,10 +86,6 @@ onMounted(() => {
     })
   }
 })
-
-onBeforeUpdate(() => {
-  slotChildren.value = slots.default?.()
-})
 </script>
 
 <template>
@@ -102,7 +93,7 @@ onBeforeUpdate(() => {
     <TabsList :class="ui.list({ class: uiProp?.list })">
       <TabsIndicator :class="ui.indicator({ class: uiProp?.indicator })" />
 
-      <TabsTrigger v-for="(item, index) of items" :key="index" :value="String(index)" :class="ui.trigger({ class: uiProp?.trigger })">
+      <TabsTrigger v-for="(item, index) of getItems()" :key="index" :value="String(index)" :class="ui.trigger({ class: uiProp?.trigger })">
         <UCodeIcon :icon="item.icon" :filename="item.label" :class="ui.triggerIcon({ class: uiProp?.triggerIcon })" />
 
         <span :class="ui.triggerLabel({ class: uiProp?.triggerLabel })">{{ item.label }}</span>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index 1652389b44..cd9bc14bbf 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -48,7 +48,7 @@ export interface ProseCodeTreeSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onBeforeUpdate, ref, shallowRef } from 'vue'
+import { computed, watch, ref } from 'vue'
 import { TreeRoot, TreeItem } from 'reka-ui'
 import { createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -92,18 +92,38 @@ watch(() => props.modelValue, (value) => {
     }
   }
 })
-// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
-// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
-// computed, which would trigger:
+// Slot children are collected and transformed via getTreeItems(), called from the
+// template (render function). This ensures slots.default?.() is invoked during the
+// render phase, avoiding:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef(slots.default?.())
+let flatItems: TreeItem[] = []
+// eslint-disable-next-line vue/no-dupe-keys
+let items: TreeNode[] = []
+let prevLabels = ''
 
-const flatItems = computed<TreeItem[]>(() => {
-  return props.items || slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
-})
+function getTreeItems() {
+  const newFlatItems: TreeItem[] = props.items || slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+  const newLabels = newFlatItems.map(i => i.label).join('\n')
 
-// eslint-disable-next-line vue/no-dupe-keys
-const items = computed(() => buildTree(flatItems.value))
+  if (newLabels !== prevLabels) {
+    // Re-expand all when flatItems actually change and expandAll is true
+    if (prevLabels && props.expandAll) {
+      expanded.value = getExpandedPaths(undefined, newFlatItems)
+    }
+
+    flatItems = newFlatItems
+    items = buildTree(flatItems)
+    prevLabels = newLabels
+
+    // Update lastSelectedItem when items change
+    const selectedItem = flatItems.find(item => model.value?.path === item.label)
+    if (selectedItem?.component) {
+      lastSelectedItem.value = selectedItem
+    }
+  }
+
+  return items
+}
 
 function buildTree(items: { label: string }[]): TreeNode[] {
   const map = new Map<string, TreeNode>()
@@ -149,10 +169,10 @@ function transformSlot(slot: any, index: number): TreeItem {
   }
 }
 
-function getExpandedPaths(path?: string) {
+function getExpandedPaths(path?: string, items?: TreeItem[]) {
   if (props.expandAll) {
     const allPaths = new Set<string>()
-    flatItems.value.forEach((item) => {
+    ;(items || flatItems).forEach((item) => {
       const parts = item.label.split('/')
       for (let i = 1; i < parts.length; i++) {
         allPaths.add(parts.slice(0, i).join('/'))
@@ -171,28 +191,11 @@ function getExpandedPaths(path?: string) {
 
 const expanded = ref(getExpandedPaths(model.value?.path))
 
-// Re-expand all when flatItems actually change and expandAll is true
-watch(flatItems, (newItems, oldItems) => {
-  if (!props.expandAll) return
-
-  // Compare labels to detect actual changes (not just re-renders from slot re-evaluation)
-  const newLabels = newItems.map(i => i.label).join('\n')
-  const oldLabels = oldItems?.map(i => i.label).join('\n') ?? ''
-
-  if (newLabels !== oldLabels) {
-    expanded.value = getExpandedPaths()
-  }
-})
-
 watch(model, (value) => {
-  const item = flatItems.value.find(item => value?.path === item.label)
+  const item = flatItems.find(item => value?.path === item.label)
   if (item?.component) {
     lastSelectedItem.value = item
   }
-}, { immediate: true })
-
-onBeforeUpdate(() => {
-  slotChildren.value = slots.default?.()
 })
 </script>
 
@@ -254,7 +257,7 @@ onBeforeUpdate(() => {
       v-model="model"
       v-model:expanded="expanded"
       :class="ui.list({ class: uiProp?.list })"
-      :items="items"
+      :items="getTreeItems()"
       :get-key="(item) => item.path"
     >
       <ReuseTreeTemplate :items="items" :level="1" />
diff --git a/src/runtime/components/prose/Tabs.vue b/src/runtime/components/prose/Tabs.vue
index 3c77ca8a3a..081113efa1 100644
--- a/src/runtime/components/prose/Tabs.vue
+++ b/src/runtime/components/prose/Tabs.vue
@@ -30,7 +30,7 @@ export interface ProseTabsSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, onBeforeUpdate, shallowRef } from 'vue'
+import { computed, watch, onMounted } from 'vue'
 import { useState, useAppConfig } from '#imports'
 import { useComponentUI } from '../../composables/useComponentUI'
 import { transformUI } from '../../utils'
@@ -50,20 +50,12 @@ const uiProp = useComponentUI('prose.tabs', props)
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.tabs || {}) }))
 
-// Collect slot children in a shallowRef, seeded during setup for SSR/initial render,
-// then refreshed via onBeforeUpdate. This avoids calling slots.default?.() inside
-// computed, which would trigger:
-// "[Vue warn]: Slot "default" invoked outside of the render function"
-const slotChildren = shallowRef(slots.default?.())
-
-const items = computed<{
-  index: number
-  label: string
-  icon: string
-  component: any
-}[]>(() => {
-  return slotChildren.value?.flatMap(transformSlot).filter(Boolean) || []
-})
+// Slot children are collected and transformed via getItems(), called from the template
+// (render function). This ensures slots.default?.() is invoked during the render phase,
+// avoiding: "[Vue warn]: Slot "default" invoked outside of the render function"
+function getItems() {
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+}
 
 function transformSlot(slot: any, index: number) {
   if (typeof slot.type === 'symbol') {
@@ -107,10 +99,6 @@ async function onUpdateModelValue() {
     }, 200)
   }
 }
-
-onBeforeUpdate(() => {
-  slotChildren.value = slots.default?.()
-})
 </script>
 
 <template>
@@ -118,7 +106,7 @@ onBeforeUpdate(() => {
     v-model="model"
     color="primary"
     variant="link"
-    :items="items"
+    :items="getItems()"
     :class="props.class"
     :unmount-on-hide="false"
     :ui="transformUI(ui(), uiProp)"

From e115375afb88cefa676c89b1ee34fb8ab5a3dde1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 2 Mar 2026 18:05:26 +0000
Subject: [PATCH 4/4] fix: apply getter functions + add flattening

---
 src/runtime/components/prose/CodeGroup.vue |  7 +--
 src/runtime/components/prose/CodeTree.vue  | 58 +++++++++++++---------
 2 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/runtime/components/prose/CodeGroup.vue b/src/runtime/components/prose/CodeGroup.vue
index 3ff49db947..d656b8a84d 100644
--- a/src/runtime/components/prose/CodeGroup.vue
+++ b/src/runtime/components/prose/CodeGroup.vue
@@ -48,11 +48,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.prose?.codeG
 // Slot children are collected and transformed via getItems(), called from the template
 // (render function). This ensures slots.default?.() is invoked during the render phase,
 // avoiding: "[Vue warn]: Slot "default" invoked outside of the render function"
-let items: { label: string, icon: string, component: any }[] = []
-
 function getItems() {
-  items = slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
-  return items
+  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
 }
 
 function transformSlot(slot: any, index: number) {
@@ -100,7 +97,7 @@ onMounted(() => {
       </TabsTrigger>
     </TabsList>
 
-    <TabsContent v-for="(item, index) of items" :key="index" :value="String(index)" as-child>
+    <TabsContent v-for="(item, index) of getItems()" :key="index" :value="String(index)" as-child>
       <component :is="item.component" hide-header tabindex="-1" />
     </TabsContent>
   </TabsRoot>
diff --git a/src/runtime/components/prose/CodeTree.vue b/src/runtime/components/prose/CodeTree.vue
index cd9bc14bbf..25167419df 100644
--- a/src/runtime/components/prose/CodeTree.vue
+++ b/src/runtime/components/prose/CodeTree.vue
@@ -96,34 +96,44 @@ watch(() => props.modelValue, (value) => {
 // template (render function). This ensures slots.default?.() is invoked during the
 // render phase, avoiding:
 // "[Vue warn]: Slot "default" invoked outside of the render function"
-let flatItems: TreeItem[] = []
-// eslint-disable-next-line vue/no-dupe-keys
-let items: TreeNode[] = []
-let prevLabels = ''
+// Mutable state is wrapped inside the IIFE closure to prevent Vue from exposing it
+// to the template context, which would cause devalue serialization errors during SSR
+// (VNodes are non-POJO objects).
+const { getTreeItems, getFlatItems } = (() => {
+  let flatItems: TreeItem[] = []
+  let treeItems: TreeNode[] = []
+  let prevLabels = ''
+
+  function getTreeItems() {
+    const newFlatItems: TreeItem[] = props.items || slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
+    const newLabels = newFlatItems.map(i => i.label).join('\n')
+
+    if (newLabels !== prevLabels) {
+      // Re-expand all when flatItems actually change and expandAll is true
+      if (prevLabels && props.expandAll) {
+        expanded.value = getExpandedPaths(undefined, newFlatItems)
+      }
 
-function getTreeItems() {
-  const newFlatItems: TreeItem[] = props.items || slots.default?.()?.flatMap(transformSlot).filter(Boolean) || []
-  const newLabels = newFlatItems.map(i => i.label).join('\n')
+      flatItems = newFlatItems
+      treeItems = buildTree(newFlatItems)
+      prevLabels = newLabels
 
-  if (newLabels !== prevLabels) {
-    // Re-expand all when flatItems actually change and expandAll is true
-    if (prevLabels && props.expandAll) {
-      expanded.value = getExpandedPaths(undefined, newFlatItems)
+      // Update lastSelectedItem when items change
+      const selectedItem = newFlatItems.find(item => model.value?.path === item.label)
+      if (selectedItem?.component) {
+        lastSelectedItem.value = selectedItem
+      }
     }
 
-    flatItems = newFlatItems
-    items = buildTree(flatItems)
-    prevLabels = newLabels
+    return treeItems
+  }
 
-    // Update lastSelectedItem when items change
-    const selectedItem = flatItems.find(item => model.value?.path === item.label)
-    if (selectedItem?.component) {
-      lastSelectedItem.value = selectedItem
-    }
+  function getFlatItems() {
+    return flatItems
   }
 
-  return items
-}
+  return { getTreeItems, getFlatItems }
+})()
 
 function buildTree(items: { label: string }[]): TreeNode[] {
   const map = new Map<string, TreeNode>()
@@ -172,7 +182,7 @@ function transformSlot(slot: any, index: number): TreeItem {
 function getExpandedPaths(path?: string, items?: TreeItem[]) {
   if (props.expandAll) {
     const allPaths = new Set<string>()
-    ;(items || flatItems).forEach((item) => {
+    ;(items || getFlatItems()).forEach((item) => {
       const parts = item.label.split('/')
       for (let i = 1; i < parts.length; i++) {
         allPaths.add(parts.slice(0, i).join('/'))
@@ -192,7 +202,7 @@ function getExpandedPaths(path?: string, items?: TreeItem[]) {
 const expanded = ref(getExpandedPaths(model.value?.path))
 
 watch(model, (value) => {
-  const item = flatItems.find(item => value?.path === item.label)
+  const item = getFlatItems().find(item => value?.path === item.label)
   if (item?.component) {
     lastSelectedItem.value = item
   }
@@ -260,7 +270,7 @@ watch(model, (value) => {
       :items="getTreeItems()"
       :get-key="(item) => item.path"
     >
-      <ReuseTreeTemplate :items="items" :level="1" />
+      <ReuseTreeTemplate :items="getTreeItems()" :level="1" />
     </TreeRoot>
 
     <div :class="ui.content({ class: uiProp?.content })">