StoryblokRichText inside .vue components triggers Invalid watch source: undefined warning

[m-shum]

Describe the issue you're facing

Nuxt v: ^3.10.2
storyblok-nuxt v: ^6.2.0
ssr: true

Issue description:
Using StoryblokRichText triggers a vue warning: Invalid watch source: undefined. A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. Using old v-html with renderRichText does not trigger warning.

Wrapping StoryblokRichText in ClientOnly doesn't resolve the issue, which also shows up if StoryblokRichText is called in app.vue as well as nested components. Checking for block before rendering StoryblokRichText does not resolve the issue.

Reproduction

https://stackblitz.com/edit/github-ugbuh1?file=app.vue,nuxt.config.ts

Steps to reproduce

No response

System Info

Nuxt v: ^3.10.2
storyblok-nuxt v: ^6.2.0

  System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 138.94 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6

Used Package Manager

npm

Error logs (Optional)

runtime-core.esm-bundler.js?v=206996f9:50 [Vue warn]: Invalid watch source: undefined A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
at <StoryblokRichText key=0 doc= {type: 'doc', content: Array(5)} >
at
at <Index onVnodeUnmounted=fn ref=Ref< Proxy(Object) {__v_skip: true} > >
at <Anonymous key="/organizations" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/organizations?page=1', hash: '', query: {…}, name: 'organizations___en___default', path: '/organizations', …} ... >
at
at
at <Default ref=Ref< Proxy(Object) {__v_skip: true} > >
at <AsyncComponentWrapper ref=Ref< Proxy(Object) {__v_skip: true} > >
at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" >
at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... >
at
at
at

Validations

• Follow our Code of Conduct

[codeflorist]

The problem was introduced in @storyblok/vue v8.1.5.

Putting "@storyblok/vue": "8.1.4" in package.json solves the problem.

See storyblok/storyblok-vue#768

[m-shum]

Installing @storyblok/vue at 8.1.4 resolved the issue, thank you @codeflorist !
I assume this will be resolved once a patch is released in @storyblok/vue and the nuxt module's updated. I'm leaving this issue open so it can be tracked, since ideally we wouldn't need to install a secondary dep at a fixed version.