vue窗口变化onresize

div大小随着窗口变化而变化
效果：


以下代码：

<template>
  <div>
    <div class="mask">
      <div class="center" :style="{width:centerWidth*0.2+'px',height:centerHeight*0.5+'px'}">
        <p>width:{{centerWidth}}</p>
        <p>height:{{centerHeight}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerWidth: document.documentElement.clientWidth,
      centerHeight: document.documentElement.clientHeight
    };
  },
  mounted() {
    window.onresize = () => {
      this.centerWidth = document.documentElement.clientWidth;
      this.centerHeight = document.documentElement.clientHeight;
    };
  }
};
</script>