VSCode could not find all the references for component emits

[weiwen-chi]

What problem does this feature solve?

We are working on a Vue 3 project using VSCode with the official Vue extension. In our project, we follow kebab-case naming conventions for all props and emitted events in Single File Components (SFCs). However, we’ve encountered an issue where the "Find All References" feature does not behave as expected for emitted events.

example:

<!-- TestComponent.vue -->
<template>
  <div>Test Component</div>
</template>

<script setup lang="ts">
defineEmits<{
  selectElement: [];
}>();
</script>

<!-- ParentComponent.vue -->
<template>
  <TestComponent @select-element="callBackMethod" />
</template>

<script setup lang="ts">
function callBackMethod() {
   console.log('this is called');
}
</script>
</script>

In this scenario, if we right-click on @select-element in ParentComponent.vue and choose "Find All References", it doesn’t locate the definition of the emitted event in TestComponent.vue. Similarly, doing the reverse on the emitted event select-element in TestComponent.vue doesn’t find its usage in ParentComponent.vue.

What does the proposed solution look like?

VSCode should be able to identify all references to the emit event, providing both the definition and all occurrences (usages) within the project.