Version

3.0.2

Steps to reproduce

given SFC:

<template>
<div>
{{ $a.bar }}
</div>
</template>

<script lang="ts">
import { defineComponent, useCssModule } from 'vue'

export default defineComponent({
    setup() {
        return {
            $a: { bar: 1 },
            $style: useCssModule(),
        }
    }
})
</script>

<style module>
.foo { color: #fff; }
</style>

What is expected?

shows value of $a.bar

What is actually happening?

Get error TypeError: Cannot read property 'bar' of undefined

$style in template can work properly. But using any other $ prefixed variables, Vue throws error.

I'm using $ prefix because I'm going to inject some values like $globalStyle, $theme in setup(), but template always throws error with undefined except using $style as variable name.

You should avoid prefixing your variables with $ or _:

See https://v3.vuejs.org/guide/data-methods.html#data-properties

When defined in data, you get a warning about it but I'm not sure if the same should apply here

@posva good point!

With vue-loader, it allows css modules inject as custom name like $globalStyle and it works with old-style component definition. But with setup()-style definition, we have to assign useCSSModule('custom-name') to some variable and export from setup(), thus, I cannot export custom names like $globalStyle.

If $- prefix is not allowed in exports from setup(), I think $style should also be banned and we may need to update the documents. 🤔 (Like what vue-router does: with composition API, we use router instead of this.$router)

There is already a warning in version 3.0.5, see https://codesandbox.io/s/adoring-khayyam-5qrr4?file=/src/index.ts

There is already a warning in version 3.0.5, see https://codesandbox.io/s/adoring-khayyam-5qrr4?file=/src/index.ts

wow thank you :)