Docs for React/Vue: Add example with imported query

### Is your feature request related to a problem? Please describe.

I followed the example at https://the-guild.dev/graphql/codegen/docs/guides/react-vue, which is great, but only shows examples where gql is embedded directly in components. We've extracted all our graphql into dedicated .gql and .ts files, which we import. There's no example shown of the expected usage in that scenario. I can't find any other documentation on how that could work.

### Describe the solution you'd like

Add an example of an external .gql and/or .ts file, containing a query that's imported, and then how to use that imported file to get the type checking.

For me, I'm using Vue 3, Apollo, and Composition API, so that's my preferred format :)

Ideally, there would also be more documentation on how this all is expected to work. I see the graphql import is supposed to change, so I guess that means the Typescript gql import changes from importing from graphql-tag to the generated gql -- is that right? Do we need to change anything for the .gql files? What about .gql files that import other fragments?

### Describe alternatives you've considered

I asked the chatbot, and it pointed me to `@graphql-codegen/typescript-vue-apollo`. But that clearly states it's not recommended anymore, and the preference is to use the client preset. I'm trying to follow that advice.

### Is your feature request related to a problem? Please describe.

_No response_