VueのFunctional Componentsに親で付与したCSSを読み込む方法

以下のように Vue の Functional なコンポーネントを親から呼び出します。

AppButton.vue

<template functional>
  <button class="app-button">
    <slot />
  </button>
</template>

<style lang="scss" scoped>
.app-button {
  background: red;
}
</style>

親コンポーネント

<template>
  <AppButton class="button-test">ボタン</AppButton>
</template>

<script>
import AppButton from '~/components/AppButton'

export default {
  components: {
    AppButton
  },
}
</script>

<style lang="scss" scoped>
.button-test {
  margin: 10px;
}
</style>

このとき、親で定義した.button-testは読み込まれません。

詳しくは vue.js: functional componentとscoped css - ぬまのそこ あたりの記事が参考になるのですが、執筆時点ではこの記事の対処法は動作しませんでした。

そこでもう少し調べると、以下のように書けば良いことが分かりました。

AppButton.vue

<template functional>
  <button class="app-button" :class="data.staticClass">
    <slot />
  </button>
</template>

<style lang="scss" scoped>
.app-button {
  background: red;
}
</style>

これで親で定義した class が読み込まれたかと思います。以下の issue に感謝。

"class" and "style" attributes have no effect on functional SFC components · Issue #7985 · vuejs/vue