Vue change div background color

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Change Div Background Color</h3>
        <div :style="{ backgroundColor: bgColor }">
            <h1>Welcome to my app!</h1>
            <p>Click the button below to change the background color:</p>
            <button @click="changeBackgroundColor">Change color</button>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bgColor: 'red' // Set the initial background color to red
                }
            },
            methods: {
                changeBackgroundColor() {
                    // Generate a random color using a helper function
                    const randomColor = this.getRandomColor();

// Update the background color
                    this.bgColor = randomColor;
                },
                getRandomColor() {
                    // Generate a random RGB color
                    const r = Math.floor(Math.random() * 256);
                    const g = Math.floor(Math.random() * 256);
                    const b = Math.floor(Math.random() * 256);

// Convert the RGB values to a CSS color string
                    return `rgb(${r},${g},${b})`;
                }
            }

});
    </script>
</body>
</html>