Style-vars-2 v-bind feature doesn't work with Composition API #3688
Description
Version
3.0.11
Reproduction link
https://codesandbox.io/s/epvsl
Steps to reproduce
With the following template:
<template>
<div class="bloc">{{ size }} {{ color }}</div>
</template>
<script>
// Component script
</script>
<style scoped>
.bloc {
width: v-bind(size);
height: v-bind(size);
background-color: v-bind(color);
}
</style>1 - Create a component using dynamic CSS style based on the Options API.
export default {
data: () => {
return {
size: "100px",
color: "green"
}
}
}2 - Create a component using dynamic CSS style based on the Composition API.
export default {
setup() {
const
size = "100px",
color = "red"
return {
size,
color
}
}
}What is expected?
CSS v-bind feature should work using both Options and Composition API.
What is actually happening?
CSS v-bind feature doesn't work with the Composition API.
The following error is printed:
Uncaught (in promise) ReferenceError: _unref is not defined
__injectCSSVars__
setVars