在VueJS中如何确定模板中元素的元素宽度

<template>
  <div :style="{ width: elementWidth }"></div>
</template>

<script>
export default {
  data() {
    return {
      elementWidth: 0
    };
  },
  computed: {
    elementWidth() {
      // 进行宽度计算的逻辑
      return '200px'; // 返回计算后的宽度值
    }
  }
};
</script>

<template>
  <div ref="element"></div>
</template>

<script>
export default {
  mounted() {
    const elementWidth = this.$refs.element.offsetWidth;
    console.log(elementWidth); // 输出元素的宽度
  }
};
</script>