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

I'm having this very issue running vue 3.2.4 package.json: "vue": "^3.2.4"

<script>
export default {
...
  setup(){
...
    let boardThemeLight = Themes.cpc_board_theme[0]; // Themes.cpc_board_theme is just a basic array ['#646372','#353340']
    let boardThemeDark = Themes.cpc_board_theme[1]; // ['#646372','#353340']
...
    return{ 
    ...
    boardThemeLight,
    boardThemeDark
    }
...
  }
}
</script>

<style scoped>
#board1 :deep(.white-1e1d7) {
   /* background-color: #646372;*/
   background-color: v-bind(boardThemeLight);
    @apply text-purple-50;
  }
#board1 :deep(.black-3c85d) {
   /* background-color: #353340;*/
    @apply text-purple-50;
  }
<style>

Error in browser:

Uncaught (in promise) ReferenceError: _unref is not defined
    at eval (Game2.vue?72e0:228)
    at setVars (runtime-dom.esm-bundler.js?830f:673)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6990)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:6999)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js?5c40:7346)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:7191)
    at flushJobs (runtime-core.esm-bundler.js?5c40:7228)

If I remove this v-bind, I don't get this error but then I don't get the desired effect of having state driven CSS

I'm having this very issue running vue 3.2.4 package.json: "vue": "^3.2.4"

<script>
export default {
...
  setup(){
...
    let boardThemeLight = Themes.cpc_board_theme[0]; // Themes.cpc_board_theme is just a basic array ['#646372','#353340']
    let boardThemeDark = Themes.cpc_board_theme[1]; // ['#646372','#353340']
...
    return{ 
    ...
    boardThemeLight,
    boardThemeDark
    }
...
  }
}
</script>

<style scoped>
#board1 :deep(.white-1e1d7) {
   /* background-color: #646372;*/
   background-color: v-bind(boardThemeLight);
    @apply text-purple-50;
  }
#board1 :deep(.black-3c85d) {
   /* background-color: #353340;*/
    @apply text-purple-50;
  }
<style>

Error in browser:

Uncaught (in promise) ReferenceError: _unref is not defined
    at eval (Game2.vue?72e0:228)
    at setVars (runtime-dom.esm-bundler.js?830f:673)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6990)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:6999)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js?5c40:7346)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:7191)
    at flushJobs (runtime-core.esm-bundler.js?5c40:7228)

If I remove this v-bind, I don't get this error but then I don't get the desired effect of having state driven CSS

Resolved.

I realized that when i updated to vue 3.2.4 my devDependency for compiler-sfc did NOT automatically update so i had to manually run npm install -D @vue/compiler-sfc for it to manually update to 3.2.4 to match with my vue version which allowed v-bind to work.