子组件：
在computed里面设置的style

 <div class="main fixed bg_fff t0 b0 flex column oh" id="video_box" :style="style"  v-if="showTag"></div>

computed: {
      style() {
        const width = this.width;
        return {
          top: '40px',
          left: `${this.W / 2}px`,
          marginLeft: `${0 - width / 2}px`,
          width: `${width}px`
        };
      }
    }

这个子组件是能够拖动的fixed，现在的需求：在他拖动这个子组件以后，父组件或者子组件获取到这个子组件的top值（距离页面顶部的距离），然后重新给他赋值。
父组件：
引用子组件

<consultation-video-dialog ref="videoDialog" :id="consultId" :room-id="room.roomNo" class="video_box"></consultation-video-dialog>
    </div>

console.log(this.$refs.videoDialog.style.cssText); // 父组件打印 返回undefined

尝试改变this.$refs.videoDialog.style.top，但是拖动以后子组件里的style的top一直是初始化的40px，获取到没有什么意义
怎么才能给子组件样式动态赋值呢