Vue instance $root replaced with CSS module's $root

[dyong1]

Version

16.1.2

Reproduction link

N/A

Steps to reproduce

<template>
  <div class="$root.foo"></div>
</template>
<script>
vue script stuff here...
you do something with this.$root then you'll see the CSS module $root.
</script>
<style lang="scss" module="$root">
.foo {
  color: red;
}
</style>

What is expected?

Error for $root is reserved and use other names instead.

What is actually happening?

Vue instance this.$root is replaced with the CSS module's $root.

---

I believe this is not a concern of CSS module preprocessor and Vue should protect itself from being used in this kind of wrong way.

[LinusBorg]

You can do something like the following, too:

beforeCreate() {
this.$root = 'whatever'
}

All vm properties are overridable like this in Vue. So I'm not sure it's something that should be prevented in this specific instance.