动态样式组件

我试图创建动态样式的组件，通过从JavaScript变量设置CSS值，而不使用文档Web API，我的意思是像Document.getElementById()和Document.querySelector()这样的方法。
我用的是Vue. JSbtw，我得到了一个代码，看起来像这样：

<template>
  <div class="badge-container" :style="myStyle">
    <slot></slot>
  </div>
<template>

<script>
  setup(props) {
    const myStyle = ref(`--color: ${props.color}`)
    return{myStyle}
    }
</script>

<style>
.badge-container::after {
  background-color: var(--color);
  }
</style>

• • 它工作正常**，但只适用于一个变量，&我想使用多个变量，我如何从JS传递多个变量到CSS。

我试着把myStyle转换成一个对象来传递多个值，但是失败了。我可以把所有的样式都像这样
但是问题是这样的div样式会改变，我想在**.badge-container::after之后改变**：
有没有办法做到这一点，不使用文档Web API或JSX。