docs: wrap registry examples in useProxyRegistry + warn on footgun

Three examples (use-features, create-breadcrumbs basic + file-explorer)
now wrap their registries through useProxyRegistry and iterate
proxy.values instead of registry.values(), matching the component-layer
guidance for template iteration.

Also adds a WARNING callout in the composables index explaining why
passing a reactive registry directly to v-for breaks dep tracking.

Pairs with the composable source refactor in 8ca8557.

Author: johnleider

apps/docs/src/examples/composables/create-breadcrumbs/basic.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { createBreadcrumbs } from '@vuetify/v0'
+  import { toRef } from 'vue'
+  import { createBreadcrumbs, useProxyRegistry } from '@vuetify/v0'
 
   const breadcrumbs = createBreadcrumbs()
+  const proxy = useProxyRegistry(breadcrumbs)
 
   const path = [
     { text: 'Home' },
@@ -15,7 +16,7 @@
 
   breadcrumbs.onboard(path)
 
-  const items = computed(() => breadcrumbs.values())
+  const items = toRef(() => proxy.values)
 
   function reset () {
     breadcrumbs.clear()

apps/docs/src/examples/composables/create-breadcrumbs/file-explorer/FileExplorer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { createBreadcrumbs } from '@vuetify/v0'
+  import { computed, toRef } from 'vue'
+  import { createBreadcrumbs, useProxyRegistry } from '@vuetify/v0'
   import { tree } from './tree'
 
   import type { BreadcrumbTicketInput } from '@vuetify/v0'
@@ -12,10 +12,11 @@
   }
 
   const breadcrumbs = createBreadcrumbs<FileBreadcrumbTicketInput>()
+  const proxy = useProxyRegistry(breadcrumbs)
 
   const current = computed(() => breadcrumbs.selectedValue.value ?? tree)
   const children = computed(() => current.value.children ?? [])
-  const items = computed(() => breadcrumbs.values())
+  const items = toRef(() => proxy.values)
 
   function isFolder (node: FolderNode) {
     return !!node.children

apps/docs/src/examples/composables/use-features/feature-flags.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { createFeaturesContext, useFeatures } from '@vuetify/v0'
+  import { createFeaturesContext, useFeatures, useProxyRegistry } from '@vuetify/v0'
   import { toRef } from 'vue'
 
   const [, provideFeatures] = createFeaturesContext({
@@ -16,16 +16,17 @@
   provideFeatures()
 
   const features = useFeatures()
+  const proxy = useProxyRegistry(features)
 
-  const tickets = toRef(() => [...features.values()])
+  const tickets = toRef(() => proxy.values)
   const enabled = toRef(() => features.selectedIds.size)
 </script>
 
 <template>
   <div class="space-y-4">
     <div class="flex items-center justify-between">
       <p class="text-xs text-on-surface-variant">
-        {{ enabled }} / {{ features.size }} features enabled
+        {{ enabled }} / {{ proxy.size }} features enabled
       </p>
       <div class="flex gap-1.5">
         <button

apps/docs/src/pages/composables/index.md

@@ -82,6 +82,9 @@ For direct Vue reactivity on the collection and tickets themselves, pass `reacti
 </template>
 ```
 
+> [!WARNING]
+> Don't pass a registry directly to `v-for`. Pair `events: true` with `useProxyRegistry()` at the component boundary — the proxy exposes reactive `keys`, `values`, `entries`, and `size` properties that templates can iterate safely. Reading `.values()` from a `reactive: true` registry in a `v-for` breaks Vue's dep tracking because the internal cache invalidates on every mutation.
+
 Unlike events (which fire callbacks) or `useProxyRegistry` (which wraps with computed refs), `reactive: true` makes the underlying Map and each ticket `shallowReactive`. Use it when you need Vue's dependency tracking at the ticket level.
 
 ### useProxyModel for v-model Binding