How do I listen for changes in DOM element size?

Ideas ：

window Yes resize event , We can think of it iframe Also have resize event . We're listening for dimensional changes DOM Add a iframe,iframe Set up width、height All for 100%, And bind the resize Events can be monitored .

Code implementation ：

<template>
<div class="container">
  <div class="item" :style="{height}">
    <iframe ref="iframe" class="iframe"></iframe>
  </div>
  <button @click="changeHeight"> Change the height </button>
</div>
</template>

<script>
export default {
  data() {
    return {
      height: '200px'
    }
  },
  mounted () {
    this.$refs.iframe?.contentWindow.addEventListener('resize', () => {
      console.log('resize')
    });
  },
  methods: {
    changeHeight() {
      this.height = '300px';
    }
  },
};
</script>

<style scoped>
.item {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
}
.iframe {
  position: absolute;
  z-index: -1000;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
}
</style>