Using a composite TypeScript config

[PindaPixel]

I'm trying to configure application code, unit tests, and configuration files as different projects since they run in different environments. I've seen the Vue starter template use composite but in the end the language service evaluates every file using tsconfig.vitest.json since that defines an empty exclude array.
A minimal reproduction of my setup is available here: https://github.com/PindaPixel/vue-tsconfig-paths
What I notice is a inconsistent behaviour between the VSCode web and desktop editors:

There's a few instances that I cannot wrap my head around, though. For one, why does my paths defined in tsconfig.app.json not apply to .vue files while this is the only config that includes them explicitly:

And why am I unable to import .vue files from .web.test.ts files but am able to import them from .test.ts files:

Configuring TypeScript in this setting seems very complicated and I cannot say whether certain behaviour is a bug, unsupported or just erroneous configuration on my end.
Any help is appreciated.

[PindaPixel]

I ended up finding out why it wasn't working as I expected. I needed to add

"include": [] // or "files": []

in tsconfig.json to make sure it doesn't load this root config for any files. Even when looking at tslogs I couldn't find the fact it was using tsconfig.json over the more specific configs when parsing.

Now the only thing that still confuses me is that with this setup I still cannot import .vue files from my test files:

File 'c:/../src/App.vue' is not listed within the file list of project

While I can import from index as it should (I think) because of the references in tsconfig.web.test.json.

I believe this to be the case because tsconfig.app.json exlcudes all *.test.ts files, but since the behaviour for .vue and .ts imports here is different, to me it looks like either of the two behaviours is a bug.

[RayGuo-ergou]

The error message tells you why clearly:

Diagnostics:
1. File 'vue-tsconfig-paths/src/App.vue' is not listed within the file list of project 'vue-tsconfig-paths/tsconfig.web.test.json'. Projects must list all files or use an 'include' pattern.
     The file is in the program because:
       Imported via "./App.vue" from file 'vue-tsconfig-paths/src/App.web.test.ts'
       Imported via "./App.vue" from file 'vue-tsconfig-paths/src/index.test.ts'
       Imported via "~/App.vue" from file 'vue-tsconfig-paths/src/index.ts' [6307]

-    "include": ["**/*.web.test.ts"]
+    "include": ["**/*.web.test.ts", "src/**/*.vue"]

[PindaPixel]

Notice how I can still import { test } from ./index? I have a reference to the project so I should be able to import files that are included in the referenced project, no?

What I'm trying to say, is that if I can import index.ts but not App.vue then the behaviour seems inconsistent.

[RayGuo-ergou]

Yeah okay I see, no idea.