External document import handling mismatch between `typescript-vue-apollo` and `typescript-vue-urql`

**Describe the bug**
While trying to share types between urql-vue and vue-apollo, there seems to be some mismatches in how data is being referenced.

The issue I'm seeing is when importing document types using
```
documentMode: "external",
importDocumentNodeExternallyFrom: "./graphql-documents"
```

typescript-vue-apollo will reference the document types in camelCase, while typescript-vue-urql on the other hand will use PascalCase. I can change the naming of the document file (which lets me satisfy either Vue or Urql), but I can't however find a way to override how it's being referenced from the other files.

Additionally, typescript-vue-urql will not reference the document types properly, as it does not add the required prefix (like vue-apollo does). I've tried setting `documentVariablePrefix: "Operations."`, but the generated code omits the trailing `.`, so it becomes `OperationsUser` instead of `Operations.User`.

(Also related: https://github.com/dotansimha/graphql-code-generator/issues/6303 )

**To Reproduce**
See https://codesandbox.io/s/eloquent-pine-lqgjo?file=/graphql-urql.ts

Start with the graphql-urql.ts configuration in the linked reproduction and compare generated document references from typescript-vue-apollo and typescript-vue-urql. Investigate handling of documentMode, importDocumentNodeExternallyFrom, and documentVariablePrefix. Done means both plugins consistently reference external document types and preserve the requested prefix, including its trailing dot.

Written by the indexing model from the issue text.