使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答

<template>
  <div>
    <div class="roll_header">
      <div class="flex_item" v-for="(ti,index) in pagetitle" :key="ti" @click="changeClassify($event,index)" :class="{'changeclassify':index==temps}">{{ti}}</div>
    </div>
    <div class="roll_bar">
      <div class="bar_item" ref="baritem"></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      pagetitle:["登录","注册"],
      temps:0,
    }
  },
  methods:{
    changeClassify(event,index){
      // 改变temps的值，当前点击的控制的元素让他拥有changecolor样式
      this.temps=index;
      // 得到元素的宽度用来计算bar要移动多远
      let dis=event.target.offsetWidth;
      let distance=dis*index;
        // 注意拼接px
      this.$set(this.$refs.baritem.style,'marginleft',distance+'px')
      console.log(this.$refs.baritem.style)
    }
  }
};
</script>
<style>
.roll_header {
  width: 100%;
  height: 46px;
  display: flex;
  justify-content: center;
  line-height: 46px;
  color: rgb(121, 121, 121);
  font-size: 18px;
  cursor: pointer;
}
.flex_item {
  width: 60px;
  text-align: center;
  /* border: 1px solid rebeccapurple; */
}
.roll_bar{
  width: 180px;
  height:3px;
  border:1px solid rgb(223, 223, 223);
  background: white;
  margin: -4px auto;
  padding:0 30px;
  border-radius:2px;
}
.bar_item{
  width:60px;
  height:100%;
  background: coral;
  border-radius:4px;
}
.login{
  color: coral;
}
/* 选择拥有样式 */
.changeclassify{
  color: coral;
}

</style>

这是点击检测看赋值没问题，但是视图就是不变啊，头秃！！！！