Vue如何动态给id设置style样式

watch:{
    taskNum(to,do){
        if(to!=do)
            this.check();
        }
    },
methods:{
    check（）{
    },
}

var d = document.getElementById("taskNum");
d.style.color="#808080";
d.style.width="20%";
d.style.left= "35%";

<!-- 弹窗 -->
<div class="popbar" id="popbar">
    <h3 class="notice">来啦</h3>
</div>

.popbar{
            position: absolute;
            width: 340px;
            height: 60px;
            box-shadow: 0 0 5px 1px #464647;
            border-radius: 15px;
            border: none;
            margin-right: 10px;
            //改变margin-top的值以实现弹窗效果
            margin-top: -80px;//end 10px
            margin-left: 10px;
            background-color: rgba(100, 235, 102, 0.6);
            transition: all 0.5s;
            .notice{
                margin-top: 11.5px;
                text-align: center;
                font-size: 25px;
                color: aliceblue;
            }
        }

function lock(){
  document.getElementById("barlock").style.transform = "scale(1)"
  document.getElementById("popbar").style.marginTop= "10px"
  setTimeout(() => {
    document.getElementById("popbar").style.marginTop= "-80px"
  },2000)
}

<div ref="test" style="background=red"> </div>

method{
    this.refs.test.style.background="blue";
}