Как заставить CSS-модули (module) работать с компонентом-оберткой transition?

Компонент-обёртка transition прекрасно работает с изолированными стилями (scoped), но, к сожалению, не работает с module. Есть ли способ это исправить?

В поисках решения наткнулся на этот тред: https://github.com/vuejs/vue-loader/issues/494

В нем, core-разработчик vue предлагает использовать возможности sass-loader (селектор :global), но в моем случае это не помогло.

Я использую Nuxt и Vue2.

<template>
  <div :class="$style.wrapper">
    <button @click="visible ? visible = false : visible = true">
      Show Text
    </button>
    <transition name="test">
      <p v-show="visible">
        Just Text
      </p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {
      visible: false
    }
  }
}
</script>

<style module lang="scss">
.wrapper {
  &:global(-enter-active) { transition: opacity 1s; }
  &:global(-leave-active) { transition: opacity 1s; }
  &:global(-enter) { opacity: 0; }
  &:global(-leave-to) { opacity: 1; }
}
</style>