docs: extra note

See https://github.com/vuejs/pinia/discussions/2402#discussioncomment-8022368

diff --git a/packages/docs/cookbook/composables.md b/packages/docs/cookbook/composables.md
index 2a9649ae9a02798e0c22f7e0be32e8c710c76ca4..45cb717b3fa83460b4c0bdbf333e3367cd68d8b7 100644 (file)
--- a/packages/docs/cookbook/composables.md
+++ b/packages/docs/cookbook/composables.md
@@ -34,7 +34,7 @@ import { defineStore, skipHydrate } from 'pinia'
 import { useMediaControls } from '@vueuse/core'
 
 export const useVideoPlayer = defineStore('video', () => {
-  // we won't expose this element directly
+  // we won't expose (return) this element directly
   const videoElement = ref<HTMLVideoElement>()
   const src = ref('/data/video.mp4')
   const { playing, volume, currentTime, togglePictureInPicture } =
@@ -57,6 +57,10 @@ export const useVideoPlayer = defineStore('video', () => {
 })
 ```
 
+:::warning
+Differently from regular state, `ref<HTMLVideoElement>()` contains a non-serializable reference to the DOM element. This is why we don't return it directly. Since it's client-only state, we know it won't be set on the server and will **always** start as `undefined` on the client.
+:::
+
 ## SSR
 
 When dealing with [Server Side Rendering](../ssr/index.md), you need to take care of some extra steps in order to use composables within your stores.