Vue3 css v-bind() not working with external script

Question

I'm trying to make v-bind within css work based on this feature: https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css and https://github.com/vuejs/rfcs/pull/231

<template>
  <div class="text">Test1</div>
  {{ color }} <!-- This works -->
</template>

<script>
  export default {
    data() {
      return {
        color: 'blue',
      }
    }
  }
</script>

<style scoped>
  .text {
    color: v-bind(color); /* This works */
    font-size: 20px; /* This works */
  }
</style>

But when I put the script in an external file the v-bind won't work anymore:

<template>
  <div class="text">Test2</div>
  {{ color }} <!-- This works -->
</template>

<script lang="js" src="./Test2.js"></script>

<style scoped>
  .text {
    color: v-bind(color); /* This doesn't work :( */
    font-size: 20px; /* This works */
  }
</style>

If I put the script in the same file but use a class construction it also doesn't work:

<template>
  <div class="text">Test3</div>
  {{ color }} <!-- This works -->
</template>

<script>
  import { Options } from 'vue-class-component';
  import { Vue } from 'vue-class-component';

  @Options({
    data() {
      return {
        color: 'red',
      }
    },
  })
  export default class Test3 extends Vue {
  }
</script>

<style scoped>
  .text {
    color: v-bind(color); /* This doesn't work :( */
    font-size: 20px; /* This works */
  }
</style>

Any suggestions as to why it only works with a simple in-file script but breaks down when the code becomes a little more complex?

The {{ color }} binding in the template is just fine in all cases so it's purely the css binding that's the issue!

My ideal situation of course would be to load the class-construction from an external file.