Mixin's components are not showing in autocomplete for dependent components' templates

[Hadakajime]

Vue - Official extension or vue-tsc version

2.2.10

VSCode version

1.99.3 (system setup)

Vue version

3.5.13

TypeScript version

5.8.3

System Info

Windows 11 with WSL to Ubuntu 24

Edition	Windows 11 Business
Version	24H2
Installed on	‎2025-‎02-‎24
OS build	26100.3775
Experience	Windows Feature Experience Pack 1000.26100.66.0

System:
    OS: Linux 5.15 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 7745HX with Radeon Graphics
    Memory: 27.47 GB / 31.19 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.12.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 10.6.3 - ~/.local/share/pnpm/pnpm

package.json dependencies

{
	"dependencies": {
		"@babel/runtime": "^7.27.0",
		"@codemirror/commands": "^6.8.1",
		"@codemirror/lang-css": "^6.3.1",
		"@codemirror/lang-html": "^6.4.9",
		"@codemirror/lang-javascript": "^6.2.3",
		"@codemirror/lang-sql": "^6.8.0",
		"@codemirror/state": "^6.5.2",
		"@codemirror/theme-one-dark": "^6.1.2",
		"@codemirror/view": "^6.36.5",
		"@quasar/extras": "^1.16.17",
		"@regle/core": "^1.1.0",
		"@regle/rules": "^1.1.0",
		"@tabler/icons-vue": "^3.31.0",
		"@tabler/icons-webfont": "^3.31.0",
		"@tanstack/vue-query": "^5.74.6",
		"@uiw/codemirror-theme-github": "^4.23.10",
		"axios": "^1.8.4",
		"clone": "^2.1.2",
		"codemirror": "^6.0.1",
		"codemirror-editor-vue3": "^2.8.0",
		"decimal.js": "^10.5.0",
		"fluent-vue": "^3.7.1",
		"json-bigint": "^1.0.0",
		"oidc-client": "^1.11.5",
		"pinia": "^3.0.2",
		"quasar": "^2.18.1",
		"vue": "^3.5.13",
		"vue-router": "^4.5.0"
	},
	"devDependencies": {
		"@eslint/js": "^9.25.1",
		"@intlify/unplugin-vue-i18n": "^6.0.8",
		"@quasar/app-vite": "^2.2.0",
		"@rushstack/eslint-patch": "^1.11.0",
		"@types/clone": "^2.1.4",
		"@types/eslint": "^9.6.1",
		"@types/jsdom": "^21.1.7",
		"@types/json-bigint": "^1.0.4",
		"@types/node": "^22.14.1",
		"@typescript-eslint/eslint-plugin": "^8.31.0",
		"@typescript-eslint/parser": "^8.31.0",
		"@vue/eslint-config-typescript": "^14.5.0",
		"autoprefixer": "^10.4.21",
		"dotenv": "^16.5.0",
		"env-cmd": "^10.1.0",
		"eslint": "^9.25.1",
		"eslint-config-prettier": "^10.1.2",
		"eslint-plugin-vue": "^10.0.0",
		"globals": "^16.0.0",
		"jsdom": "^26.1.0",
		"prettier": "^3.5.3",
		"prettier-plugin-multiline-arrays": "^4.0.3",
		"ts-node": "^10.9.2",
		"type-fest": "^4.40.0",
		"typescript": "~5.8.3",
		"unplugin-fluent-vue": "^1.4.0",
		"vite-plugin-checker": "^0.8.0",
		"vite-plugin-vue-devtools": "^7.7.5",
		"vite-tsconfig-paths": "^5.1.4",
		"vue-tsc": "^2.2.10"
	}
}

Steps to reproduce

create 3 files:

1. a child component that will be included inside the mixin,
2. a mixin
3. a parent component that will use the mixin.
4. when you edit the parent component, the instance of <ChildComponent /> within the template does not receive any coloration or autocomplete, such as for the required value: string prop.
5. everything still compiles and works at runtime, though

ChildComponent.vue

<template>Mixin's child component {{ value }}</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
	name: "ChildComponent",
	props: {
		value: {
			type: String,
			required: true,
		},
	},
});
</script>

mixin.ts

import { defineComponent } from "vue";
import ChildComponent from "./ChildComponent.vue";

export const mixin = defineComponent({
	components: {
		ChildComponent,
	},
});

ParentComponent.vue

<template>
	<ChildComponent />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { mixin } from "./mixin";

export default defineComponent({
	name: "ParentComponent",
	mixins: [
		mixin,
	],
});
</script>

What is expected?

components registered inside a mixin should have their definitions recognised in the parent components that import the mixin.

What is actually happening?

the mixin's components are colored like native elements in the parent component's template, and there is no component-specific autocomplete options available

Link to minimal reproduction

https://play.vuejs.org/#eNq1VE2P0zAQ/SuWL4BUJQc4LdmVYLUHkIAVyw1ziJJp14tjB9spQVH+OzOTNGnSgliJbdU6fvPhmTfP6eSbuk72DcgLmUWoapNHuFJWxew292DjtatqZ/FBpAhn6bGPzULhdR2Fye3uUskYlERcY4SPohMlbLWFOUMvtt5VQkk8T8nXk+f6pNErSVcGqpPjlIWWI/GEvDG8Hp/0vKMOisM2XAgGVFwl3BDa43//grNm6dDQldxgM4WzW71LHoKzyA5mEFgUJdUG/Kc6amexYc4t8KNkboz7+Z6x6BvAvANe3EPx/Qz+EFrClLz1EMDvsbnJFnO/gziYb+4+QovPk7FyZWPQ+y/GzxCcaajGwe1tY0ss+8iPq33HE9B29yXctBFsODRFhZInsUPeSD3R9qfW53JfJq84DklFFs9M8FRp1/falPP497lpgOQEYdwo+YTq60SlW21ne5Iy8Ail2bwCnuOyWyZbRc6GGvw6aJC3bPh2UN6kO2WRsyUdJ5R9oPhnQRTkJiaRi64byBJ9/5+JehwJy/JHDmrv6vkacp3TTsX4q8btXfQoRHanr4cfjfZQTpeGQJLj0ZVdEsfMJjEgXf/cnJ+IWKlwEsPpOMY4+o3E4KsCtTro6PIMPeS9eh8xpOIy+2aAsT9cqUNcZP8bRoQGLA==

Any additional comments?

Please let me know if there's something I'm doing wrong.

[KazariEX]

This is a core issue. Please report it at https://github.com/vuejs/core.

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcARAG4CuqNA3AFBsDGRAzvLgAtgAG2RwAvCgzY8BSMRgAKBKQCU7Lr3ghgAD2wTEbAJDdCCngC4jx44JHIANCdLPSG7lj5x84AIyGaJg4vvKoJMomWACGIKjWNAAK0VDhMKFEaTTOxjr6XtYA2ia5etg5ALpu6hye3qEATIHSIXKZEQhscN1wZmEkVkY9wz5Cos7DpGxqGqF+AHR97TA8APzz9qLsAPTbI-sjAHqrbI2LbRbrm8g7ewf3x0A

[Hadakajime]

Thanks