vue如何监听某个元素的大小变化

<div class="dialog_wrap"></div>

 console.log(box1.offsetWidth, box1.offsetHeight);
    this.width = box1.offsetWidth; //offsetWidth属性可以返回对象的padding+border+width属性值之和
    this.height = box1.offsetHeight;
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.target.offsetWidth != this.width) {
        // 打印出entry.target 可以看到此处可以进行元素的各种变化的监听
        //此处直接写监听变化后要处理的逻辑即可
 
           //防抖处理（这里做一些监听变化后的逻辑处理）
          if (this.konvatimer !== null) {
            clearTimeout(this.konvatimer);
          }
          this.konvatimer = setTimeout(() => {
            console.log("变化", entry.target.offsetWidth);
            this.width = entry.target.offsetWidth;
            this.height = entry.target.offsetHeight;
 
            this.layer = Konva.Node.create(this.json, "screenTopo").findOne(
              "Layer"
            );
            this.stage = new Konva.Stage({
              container: "screenTopo",
              width: this.width,
              height: this.height,
            });
            this.stage.add(this.layer);
            this.handleInitKonva();
          }, 100);
        }
        
      }
    });
    resizeObserver.observe(document.querySelector(".dialog_wrap"));
     //observe方法 用于监听指定的 Element 或SVGElement

npm i element-resize-detector --save

const elementResizeDetectorMaker = require('element-resize-detector')

// 监听右侧page元素宽度变化，更新底部固定按钮栏宽度
let erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('id元素'), (ele) => {
    console.log(ele.clientWidth);
})

<template>
    <div class="page" ref="page">
        <div class="page-footer" :style="{'width': footerWidth }">
            <el-button type="primary" @click="handleSubmit">保 存</el-button>
        </div>
    </div>
</template>

 
<script>
    const elementResizeDetectorMaker = require('element-resize-detector')
    export default {
        name: "home",
        data() {
            return {
                footerWidth: "500px" // 底部固定按钮栏宽度
            }
        },
        mounted() {
            // 监听右侧page元素宽度变化，更新底部固定按钮栏宽度
            let erd = elementResizeDetectorMaker();
            erd.listenTo(this.$refs.page, (ele) => {
                this.footerWidth = ele.clientWidth - 32 + "px";
            })
        }
    }
</script> 

 
<style lang="less" scoped>
    .page-footer {
        height: 52px;
        margin: 0 16px;
        border-top: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 99;
        background-color: rgba(255, 255, 255, 0.9);
        .el-button {
            height: 32px;
            width: 96px;
            line-height: 32px;
            padding: 0;
            border-radius: 2px;
        }
    }
</style>