`ApolloError.graphQLErrors` do not match type of `GraphQLError` when using `useQuery` from `@vue/apollo-composable`

[bicarlsen]

I wasn't sure whether to raise this bug here or on Apollo's page, but because the error is coming from useQuery, I figured I would raise it here first.

Describe the bug I catch the error from useQuery which is a Ref<ApolloError>. I then extract the graphQLErrors property which is a ReadonlyArray<GraphQLError>, and iterate over the errors. Each of these errors should be a GraphQLError however the message property is not a string but rather an object with another message property, which is the actual message.

To Reproduce

const { error } = useQuery( <query> );
watch( error, () => {
  for ( const err of error.graphQLErrors ) {
    console.log( err.message );  // output: { message: 'An error occurred.' }
    console.log( err.message.message ); // output: An error occurred.
  }
} ); 

Expected behavior err.message to be a string, not an object.

const { error } = useQuery( <query> );
watch( error, () => {
  for ( const err of error.graphQLErrors ) {
    console.log( err.message ); // output: An error occurred.
  }
} ); 

Versions vue: 3.2.1 vue-apollo: 3.1.0 @apollo/client: 3.5.6 @vue/apollo-composable: 4.0.0-alpha.16