CSS references not highlighted on dynamic binding

[panwauu]

The usage of css classes is highlighted by volar. This highlighting does not work for dynamic class bindings (see example below). I myself am using dynamic class bindings extensively. More details on the dynamic class binding can be found in the Vue Docs for Class and Style Binding.
I don't know if it is possible for volar or how one would implement this feature. Maybe for the object syntax one could type it to get the references?

<template>
    <div class="staticClass">Static Class</div>
    <div :class="dynamicClassObject">Object Syntax</div>
    <div :class="dynamicClassArray">Array Syntax</div>
    <div :class="dynamicClassString">String Syntax</div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
const dynamicClassObject = ref({ 'dynamicClass': true })
const dynamicClassArray = ref(['dynamicClass'])
const dynamicClassString = ref(`${true ? 'dynamicClass' : ''}`)
</script>

<style scoped>
.staticClass {
    background: red;
}
.dynamicClass {
    background: green;
}
</style>

[johnsoncodehk]

Thanks for the suggestion, we can support the below cases without script block, because TS doesn't work that way.

<template>
    <div class="staticClass">Static Class</div>
    <div :class="{ 'dynamicClass': true }">Object Syntax</div>
    <div :class="['dynamicClass' /* support auto-complete only */]">Array Syntax</div>
    <div :class="true ? 'dynamicClass' : '' /* support auto-complete only */">String Syntax</div>
</template>

<style scoped>
// 1 reference of Static Class
.staticClass {
    background: red;
}
// 1 reference of Object Syntax only
.dynamicClass {
    background: green;
}
</style>

[panwauu]

Thanks for this blazing fast support!