Reactivity and useFragment in vue

[KammererTob]

I wanted to ask if my way of using useFragment in my Vue application is correct, or if there is a better way i am missing.

Consider the following two components (in pseudo-code).

PageLayout

<template>
   {{ pageObj.name }}
</template>

<script setup lang="ts">
const PageQuery = graphql(/* GraphQL */ `
  fragment PageQuery on Query {
    page(id: $pageId) {
      id
      name
    }
  }
`)

const props = defineProps<{
  page?: FragmentType<typeof PageQuery>
}>()

const pageObj = useFragment(PageQuery, props.show)
</script>

UserPage

<template>
    <PageLayout :page="result"/>
    {{ result.page.user }}
</template>

<script setup lang="ts">
const UserPageQuery = graphql(/* GraphQL */ `
  query UserPageQuery ($pageId: ID!) {
    ...PageQuery 
    page: page(id: $pageId) {
      id
      user
    }
  }
`)

const { result } = useQuery(UserPageQuery, { pageId: props.pageId })
</script>

while useQuery is coming from vue-apollo-composable. As you can see the page prop in the PageLayout component is optional (because it is undefined until the query returns). This also means that the result of useFragment is undefined at the start. The issue i am having is that the component is not rerendered when the result actually comes in. What are my options here? It works if i make the props reactive and use a watcher which only executes useFragment when the page prop is set. Is there a better way?

[sgsabbage]

So far I've found success in specifying it as a computed property instead, e.g:

const pageObj = computed(() => useFragment(PageQuery, props.page))

Which for me has automatically updated the fragment every time that the prop is updated.