Vueで::before、::afterなどの疑似要素を動的に変更する

before,afterの疑似要素はDOMではないらしいのでjsからは直接はいじれないらしく、
HTML内にstyleを直書きして、そこを変更する。

<template>
  <div>
    <component is="style">
      .test::after {
        content: '';
        height: {{ lineHeight }}px;
      }
    </component>
    <div class="test"></div>
  </div>
</template>

参考

https://forum.vuejs.org/t/about-using-style-tags-inside-templates/7275/3
https://stackoverflow.com/questions/49516424/use-style-tags-inside-vuejs-template-and-update-from-data-model
2つ目のリンクはrender関数を使用した方法