Vue Set Width of Element

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Set width of Element</h3>
        <div :style="{ width: elementWidth + 'px' }" style="border:1px solid green">
            Fontawesomeicons.com
            <button @click="increaseWidth">Increase Width</button>
        </div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    elementWidth: 400 // set initial width to 200 pixels
                }
            },
            methods: {
                increaseWidth() {
                    this.elementWidth += 50; // increase width by 50 pixels
                }
            }
        });

app.mount("#app");
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

#app div {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

#app button {
            margin-left: 20px;
            padding: 10px;
            font-size: 16px;
            border: none;
            background-color: lightgreen;
            color: white;
            cursor: pointer;
        }
    </style>

</body>

</html>