如何将变量应用于VueJS中的css[无内联样式]

我想创建body元素的背景色，该背景色将基于此动态更改。linearGradient。正如您可能看到的，它应该更改部分线性渐变，而不是替换整个线性渐变。不允许使用内联样式

计算：{
背景风格（）{
返回{
“--linearGradient”：this.linearGradient
}
}
},
背景：线性梯度（145.74度，#9BDBFF-33.02%，#B4DEDA 52.01%，#FFD66B var（--线性梯度）7.04%）；

---

请查找下面的代码片段

newvue({
el:“应用程序”，
模板：“bg颜色
已应用”，
数据（）{
返回{
线性半径：“#FFD66B”
}
},
观察：{
线性梯度：{
立即：是的，
处理程序（旧值、新值）{
document.body.style.background=`线性梯度（145.74度，#9BDBFF-33.02%，#B4DEDA 52.01%，${oldValue}7.04%）`
}
}
},
计算：{
背景风格：函数（）{
返回{
背景：`线性梯度（145.74度，#9BDBFF-33.02%，#B4DEDA 52.01%，${this.linearGradient}7.04%）`
}
}
}
})

如何将其传递给父元素。body元素在index.html中，而不是在component中…document.body.style.background包含一个打字错误…但这正是我想要的。。。