【Vue.js】VueCompilerに怒られずにtemplateにstyleタグを埋め込みたい

スクロールバーのデザインの為

<template>
<style>.scroll-bar-input::-webkit-slider-thumb {width:  $ratio + %;}</style>
</template>

こういうことがしたかったが、 VueCompilerに怒られる

VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates.

対策

※ Composition API記法

<template>
<div v-html="scrollBarCss"></div>
</template>

<script>

...

scrollBarCss.value = '<style>.scroll-bar-input::-webkit-slider-thumb {width: ' + ratio + '%;}</style>';

return {
  scrollBarCss
}
</script>

やりすぎるとVueCompilerのチェックの意味がなくなるので注意