fix: mark useScript instance as raw

Author: harlan-zw

docs/content/scripts/google-maps/2.api/1.script-google-maps.md

@@ -4,40 +4,17 @@ title: <ScriptGoogleMaps>
 
 The [`<ScriptGoogleMaps>`{lang="html"}](/scripts/google-maps){lang="html"} component is a wrapper around the [`useScriptGoogleMaps()`{lang="ts"}](/scripts/google-maps/api/use-script-google-maps){lang="ts"} composable. It provides a simple way to embed Google Maps in your Nuxt app.
 
+::script-types{script-key="google-maps" filter="ScriptGoogleMaps"}
+::
+
 It's optimized for performance by using the [Element Event Triggers](/docs/guides/script-triggers#element-event-triggers), only loading the Google Maps when specific elements events happen.
 
 Before Google Maps loads, it shows a placeholder using [Maps Static API](https://developers.google.com/maps/documentation/maps-static).
 
 By default, it will load on the `mouseenter`, `mouseover`, and `mousedown` events.
 
-## Key Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `apiKey` | `string` | - | Google Maps API key |
-| `center` | `LatLngLiteral \| LatLng \| string` | - | Map center (coordinates or query string) |
-| `zoom` | `number` | `15` | Map zoom level (0-21). Reactive, takes precedence over `mapOptions.zoom` |
-| `mapOptions` | `google.maps.MapOptions` | - | Full map configuration |
-| `markers` | `(string \| AdvancedMarkerElementOptions)[]` | - | Quick markers (use SFC components for full control) |
-| `trigger` | `ElementScriptTrigger` | `['mouseenter', 'mouseover', 'mousedown']` | When to load the Google Maps script |
-| `aboveTheFold` | `boolean` | `false` | Prioritize placeholder image loading |
-
 See the [Facade Component API](/docs/guides/facade-components#facade-components-api) for all props, events, and slots.
 
-## Events
-
-The [`<ScriptGoogleMaps>`{lang="html"}](/scripts/google-maps){lang="html"} component emits a single `ready` event when Google Maps loads.
-
-The `ready` event payload contains:
-
-| Property | Type | Description |
-|---|---|---|
-| `googleMaps` | `Ref<typeof google.maps>`{lang="html"} | The Google Maps API namespace |
-| `map` | `ShallowRef<google.maps.Map>`{lang="html"} | The map instance |
-| `createAdvancedMapMarker` | `(options?) => Promise<AdvancedMarkerElement>`{lang="html"} | Create a marker programmatically |
-| `resolveQueryToLatLng` | `(query: string) => Promise<LatLng>`{lang="html"} | Geocode a location string |
-| `importLibrary` | `(key: string) => Promise<any>`{lang="html"} | Load an additional Google Maps library |
-
 To subscribe to Google Map events, you can use the `ready` event.
 
 ```vue

src/runtime/composables/useScript.ts

@@ -5,7 +5,7 @@ import { resolveTrigger } from '#build/nuxt-scripts-trigger-resolver'
 import { useScript as _useScript } from '@unhead/vue/scripts'
 import { defu } from 'defu'
 import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig } from 'nuxt/app'
-import { ref } from 'vue'
+import { markRaw, ref } from 'vue'
 import { logger } from '../logger'
 
 type NuxtScriptsApp = ReturnType<typeof useNuxtApp> & {
@@ -199,5 +199,10 @@ export function useScript<T extends Record<symbol | string, any> = Record<symbol
       syncScripts()
     }
   }
+  // Prevent Vue from making the instance deeply reactive, and guard against
+  // circular JSON errors if anything calls JSON.stringify on it (Vue 3.5+
+  // refs have circular `.dep` properties).
+  markRaw(instance as any)
+  ;(instance as any).toJSON = () => ({ id: instance.id, status: instance.status.value })
   return instance as any as UseScriptContext<UseFunctionType<NuxtUseScriptOptions<T>, T>>
 }