Vue3 apollo displaying query results using composition API

So I am using vue router and trying to display the graphql results on my page.

Here is the router link on index.js

  {
    path: '/clients/:id',
    name: 'client_profile',

    component: () => import('../views/client_profile.vue')
  },

The link to the page is from a table with this code using the router-link, where an id is passed as a param:

           <router-link :to="{ name:'client_profile', params: { id: data.id }}"> {{data.name}} 
           </router-link>

The dynamic link looks like this on the setup(), where the useQuery loads my query clientEntity:

setup(){
    const route = useRoute(),
          id = computed(() => route.params.id)

    const { result } = useQuery(clientEntity,{
                        id: id.value,
                        })

    const client = computed(() => result.value?.entities[0])


return{ 
    client,
    result
  }
 }

On the HTML if I put in {{client}} or {{result}} I get the following:

//results

{ "entities": [ { "address": "555 Fake Street", "name": "Test1", "notes": "", "phone": null } ] } 

//client
{ "address": "555 Fake Street", "name": "Test1", "notes": "", "phone": null }

But if I try accessing some of the data like {{client.address}} or {{client.name}} the page turns blank and I get the following error:

[Vue warn]: Unhandled error during execution of render function 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="p-toggleable-content" > 
  at <Panel header="Description" toggleable=true style= 
Object { "text-align": "left" }
 > 
  at <ClientProfile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> 
  at <App>