https://javascriptjedi.com/bball-scoreboard/team-bonus-button.mjs

1const component = {
2	name: 'TeamBonusButton',
3
4	template: `<span class="bg-dark p-1 rounded fs-bold"><button type="button" :class="btnClass" @click="toggleBonus">BONUS</button></span>`,
5
6	props: {
7		active: { type: Boolean, required: false, default: () => false }
8	},
9
10	computed: {
11		btnClass() {
12			return this.active
13				? 'fs-1 fw-bold btn btn-light'
14				: 'fs-1 fw-bold btn btn-outline-secondary';
15		},
16
17		isActive: {
18			get() { return this.active; },
19			set(bonusIsActive) { 
20				this.$emit('update:active', bonusIsActive); 
21				console.info('isActive changed to:', bonusIsActive);
22			}
23		}
24	},
25
26	methods: {
27		toggleBonus() {
28			this.isActive = !this.isActive;
29		}
30	}
31};
32
33export default component;