Vue Js Window Resize Event

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Window Resize Event</h3>
        <p>Window width: {{ windowWidth }}</p>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    windowWidth: window.innerWidth,
                };
            },
            created() {
                window.addEventListener("resize", this.handleResize);
            },
            destroyed() {
                window.removeEventListener("resize", this.handleResize);
            },
            methods: {
                handleResize() {
                    this.windowWidth = window.innerWidth;
                },
            },

})

app.mount('#app')
    </script>
    <style scoped>
        #app {
            max-width: 800px;
            /* sets the maximum width of the container */
            margin: 0 auto;
            /* centers the container horizontally */
            padding: 20px;
            /* adds some padding to the container */
        }

h3 {
            font-size: 24px;
            /* sets the font size of the heading */
            color: #333;
            /* sets the color of the heading text */
        }

p {
            font-size: 16px;
            /* sets the font size of the paragraph */
            color: #666;
            /* sets the color of the paragraph text */
        }
    </style>

</body>

</html>