Vuetify Change Button Color if Button active or selected

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.css">
</head>
<body>
    <div id="app">
        <v-app>
            <v-main>
                <v-container>
                    <h3>Vuetify Change Button Color if Button active or selected</h3>
                    <v-btn @click="changeActiveButton(1)" color="primary" :class="{ 'active-button': activeButton === 1 }">Button
                        1</v-btn>
                    <v-btn @click="changeActiveButton(2)" color="primary" :class="{ 'active-button': activeButton === 2 }">Button
                        2</v-btn>
                    <v-btn @click="changeActiveButton(3)" color="primary" :class="{ 'active-button': activeButton === 3 }">Button
                        3</v-btn>

</v-container>

</v-main>
        </v-app>
    </div>

createApp({
            data() {
                return {
                    activeButton: null,
                };
            },
            methods: {
                changeActiveButton(buttonNumber) {
                    if (this.activeButton === buttonNumber) {
                        // If the clicked button is already active, deactivate it
                        this.activeButton = null;
                    } else {
                        // Deactivate the previously active button
                        this.activeButton = buttonNumber;
                    }
                },
            },

})
            .use(vuetify)
            .mount('#app');
    </script>
    <style scoped>
        .active-button {
            background-color:#EEFF41 !important;
            /* Change this to the color you want */
            color: #000 !important;
            /* Change the text color to match the background color */
        }
    </style>

</body>

</html>