Vue Element Resize Event

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div ref="container" class="container">
            <h2>Vue Element Resize Event</h2>
            <p>Resize the window to see the effect</p>
            <pre>Container width: {{containerWidth}}</pre>
        </div>
  
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    containerWidth: null
                }
            },
            mounted() {
                this.containerWidth = this.$refs.container.offsetWidth
                window.addEventListener('resize', this.handleResize)
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResize)
            },
            methods: {
                handleResize() {
                    this.containerWidth = this.$refs.container.offsetWidth
                }
            }
        })

app.mount('#app')
    </script>
    <style scoped>
        .container {
            width: 80%;
            margin: auto;
            background-color: lightgray;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
    </style>
</body>

</html>