Reactive Style Specificity using custom attributes (hack)

picard.vue

<!-- picard.vue -->
<template>
  <wesley :class="$style.shutupwesley" data-says-because-picard-said-make-it-so><!-- <<== Added custom data-attr here -->
  </wesley>
</template>

<script>
  import wesley from './wesley.vue'

  export default {
    name: 'picard',
    components: { wesley }
  }
</script>

<style module>
  .shutupwesley[data-says-because-picard-said-make-it-so] { color: crimson; background-color: crimson; }
</style>

rendered.html

<div id="starship-enterprise">
  <a class="picard_shutupwesley_cptJL_0 wesley_wesley_cru5hr_0" data-says-because-picard-said-make-it-so href="https://codepen.io/johnathankent/pen/QqqdWW/">
  Is it cool if my dance crew uses the holodeck to practice our new sick moves?</a>
</div>
<style>
  /* It really doesn't matter what order they render - this will override: */
  .picard_shutupwesley_cptJL_0[data-says-because-picard-said-make-it-so] {
    color: crimson;
    background-color: crimson;
  }
  /* over-ridden */
  .wesley_wesley_cru5hr_0 {
    color: blue;
    background-color: grey;
  }
</style>

wesley.vue

<!-- wesley.vue -->
<template>
  <a :class="$style.wesley" :href="url">Is it cool if my dance crew uses the holodeck to practice our new sick moves?</a>
</template>

<script>
  export default {
    name: 'wesley',
    data () { return { url: 'https://codepen.io/johnathankent/pen/QqqdWW/' } }
  }
</script>

<style module>
  .wesley { color: blue; background-color: grey; }
</style>