css文字渐变,vue更新失效，-webkit-text-fill-color的锅

今天下班前(晚上9点多了已经)发现了灵异事件
先看一下渐变的css

.valueStyle{
    background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

环境：小米原生浏览器，uc浏览器
现象：接口请求回来的数据处理后渲染到页面，页面没有更新（文字使用了渐变）
怀疑：1、初始默认值占位不够；2、多次更新，导致浏览器渲染出现问题
测试: 会发现正常的展示内容是红色的下面是初始值

-webkit-text-fill-color:red; 

如何解决呢

1. 找产品沟通不要用这种兼容有问题的效果（呵呵呵)
2. 初始设置字符够长的默认值（可能初始显示比较奇怪）
3. 空字符（可能好使）
4. 把所有更改变成一次更新