Problem with useLazyFetch with nuxt bridge

Question

I am trying to use useLazyFetch in a project where I recently upgraded from nuxt 2 to nuxt-bridge.

Like described here: https://nuxt.com/docs/bridge/bridge-composition-api#useasync-and-usefetch I thought I could use this code:

<script>
import config from '~/config.mjs'

export default {
  setup() {
    const items = ref()
    const posts = ref()
    const fetching = ref(false)
    const { filterState, removeEmpty } = useFilterManager()
    const { $moment } = useNuxtApp()
    const runtimeConfig = useRuntimeConfig()
    const { getTaxonomyTermBySlug } = useTaxonomies()

    const fetchEvents = async (filterObject) => {
      try {
        fetching.value = true
        const endpoint = `${runtimeConfig.public.BACKEND_URL}${config.endpoints.events}`
        const { data: posts, pending } = await useLazyFetch(endpoint, {
          params: filterObject,
        })
        // Alternative:
        // const { data, pending } = await useLazyFetch(endpoint, {
        //   params: filterObject,
        // })
        // items.value = data?.items


      } catch (error) {
        console.error('Error fetching events:', error) 
      } finally {
        fetching.value = false
      }
    }

    watch(
      posts, 
      (newValue) => {
        console.log('newValue: ', newValue)
      },
      { deep: true }
    )
    // ...
  

My problem is, that posts nor items are never updated. I can watch them, I export them to use in the template.

I can see in the network tab that the request is done and finished and that the response contains the items I need, but the rendered content is never updated...

What am I missing?

Also I would expect that await useLazyFetch only assigns the response to items.value whenever the call is done. Unfortunately items is never updated, how so?

I also tried to use the watch command with { deep: true, immediate: true }, but this does not work.