Vue js Add multiple style properties

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue js Bind multiple style properties </h3>
        <div>
            <p :style="{ 'font-size': fontSize + 'px', color: fontColor, 'background-color': bgColor }">{{ text }}</p>
            <button @click="incrementFontSize">Increase Font Size</button>
        </div>
    </div>
    
    <script type="module">
        const app = new Vue({
            el: "#app", // Set the root element of the app
            data() {
                return {
                    message: 'Hello Vue!',
                    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                    fontSize: 16,
                    fontColor: '#333333',
                    bgColor: '#f0f0f0'
                }
            },
            methods: {
                incrementFontSize() {
                    this.fontSize += 2;
                }
            }
        });
    </script>
</body>
</html>