Cant use useRoute and useStoryBlok in the same <script setup>

[fyoudine]

Expected Behavior

I'd like to retrieve data from storyblok using a dynamic slug

Current Behavior

When I hit the server it crash an error with no explanation

this works :

<script setup>
import { useStoryblok } from '@storyblok/nuxt-2'

const { story } = useStoryblok('mentions-legales', {
  version: 'draft'
})
</script>

<template>
  <div>
    <p>{{ slug }}</p>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

this works too :

<script setup>
import { computed, useRoute } from '@nuxtjs/composition-api'

const route = useRoute()
const slug = computed(() => route.value.params.slug)
</script>

<template>
  <div>
    <p>{{ slug }}</p>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

but this does not work

<script setup>
import { computed, useRoute } from '@nuxtjs/composition-api'
import { useStoryblok } from '@storyblok/nuxt-2'

const route = useRoute()
const slug = computed(() => route.value.params.slug)

const { story } = useStoryblok('mentions-legales', {
  version: 'draft'
})

</script>

<template>
  <div>
    <p>{{ slug }}</p>
    <StoryblokComponent v-if="story" :blok="story.content" />
  </div>
</template>

any hint to make it work is welcomed

[alexjoverm]

Hey @fyoudine! That's really weird, I'm actually able to reproduce it and tried different things in our module but always getting the same result. Seems like it's failing on @nuxtjs/composition-api

[alexjoverm]

I'd say the best workaround for now would be to use @storyblok/vue-2 directly.

[alexjoverm]

Btw, @fyoudine it would really help us if you also open an issue on the @nuxtjs/composition-api repo :)

[simon-ccoms]

I'm seeing this exact issue as well - I'm not sure how to get around it.