Can't access result.value after successful query on first load

Environment

Operating System: Windows_NT
Node Version: v18.16.0
Nuxt Version: 3.10.3
CLI Version: 3.10.1
Nitro Version: 2.9.1
Package Manager: yarn@1.22.21
Builder: -
User Config: app, css, build, components, imports, modules, ssr, preset, routeRules, apollo, vite, runtimeConfig, sitemap, optimization
Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @nuxtjs/apollo@5.0.0-alpha.13, @vueuse/nuxt@9.13.0, @pinia/nuxt@0.4.11, nuxt-swiper@1.2.2, nuxt-lodash@2.5.3, nuxt-simple-sitemap@2.7.0
Build Modules: -

Describe the bug

After a successful query using either useAsyncQuery or useQuery I can console.log my result, but when trying to access result.value it returns null as shown in the example bellow

import fetchProgramme from "~/config/graphql/preview/programme.graphql"
    const { result } = useQuery(
        fetchProgramme ,
        {id: previewId},
    );

    console.log('result : ' , result)
    console.log('result.value : ' , result.value)

Expected behaviour

Being able to access result.value

Reproduction

No response

Additional context

Also tried :

trigger the graphql query onMounted()
use useQueryand useAsyncQuery
running code on prod and local server using nuxt dev
adding prefetch : false parameter to the query

Logs