Vue Get Width and Height of Element

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="app">
        <h3>Vue 3 Get Height and Width of Element</h3>
        <div ref="elementRef" class="rectangle"></div>
        <p>Width: {{ elementWidth }}</p>
        <p>Height: {{ elementHeight }}</p>
    </div>
    <script type="module">
        const { createApp, ref, onMounted } = Vue
        createApp({
            setup() {
                const elementRef = ref(null);
                const elementWidth = ref(0);
                const elementHeight = ref(0);
                const getElementDimensions = () => {
                    if (elementRef.value) {
                        const { width, height } = elementRef.value.getBoundingClientRect();
                        elementWidth.value = width;
                        elementHeight.value = height;
                    }
                };
                onMounted(() => {
                    getElementDimensions();
                });

return {
                    elementRef,
                    elementWidth,
                    elementHeight,
                };
            }
        }).mount('#app')
    </script>
    <style scoped>
        .rectangle {
            width: 200px;
            height: 100px;
            background: red;
        }
    </style>
</body>
</html>