SearchField Component with Button Behavior and Checkbox Issue

I am using Vue 3, Vuetify, and TypeScript. In my searchField component, I have two buttons named FreeItemMaster and PatternMaster. When I click these buttons, I want to change their background color and display their respective content below. But, my code doesn't work as expected. Also, the checkbox functionality is not working. What could be the issue?
This how I want my screen to look when each button is clicked.
(https://i.stack.imgur.com/Ih3bS.png)(https://i.stack.imgur.com/Gsg7N.png)

<template>
<div class="search-fields">
<div class="search-condition mt-4">
<div class="d-flex ml-6">
<button :class="{'dark-grey-button': isFreeItemMasterBtnClicked, 'light-grey-button': !isFreeItemMasterBtnClicked}" @click="isFreeItemMasterBtnClicked = true; isPatternMasterBtnClicked = false">FreeItemMaster</button>
<button :class="{'dark-grey-button': isPatternMasterBtnClicked, 'light-grey-button': !isPatternMasterBtnClicked}" @click="isPatternMasterBtnClicked = true; isFreeItemMasterBtnClicked = false">PatternMaster</button>
</div>
<div class="d-flex" v-if="isFreeItemMasterBtnClicked">
<!-- FreeItemMasterBtn content -->
<div class="ml-3 mt-5">
<v-checkbox
dense
hide-details
label="FreeItemMaster content"
/>
</div>
<div class="ml-5 mt-7">
<v-btn rounded small style="background-color: #1ea0dc; color: #ffffff"
>Search</v-btn
>
</div>
</div>
<div class="d-flex" v-if="isPatternMasterBtnClicked">
<!-- PatternMasterBtn content -->
<div class="ml-3 mt-5">
<v-checkbox
dense
hide-details
label="PatternMaster content"
/>
</div>
<div class="ml-5 mt-7">
<v-btn rounded small style="background-color: #1ea0dc; color: #ffffff"
>Search</v-btn
>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isFreeItemMasterBtnClicked = ref(false);
const isPatternMasterBtnClicked = ref(true);
</script>
<style lang="scss" scoped>
.search-fields {
display: flex;
justify-content: space-between;
.search-condition {
p {
font-size: 14px;
font-weight: bold;
}
}
}
.dark-grey-button {
background-color: #51565b;
color: white;
padding: 10px 10px;
border: none;
text-align: center;
display: inline-block;
font-size: 14px;
margin-right: 2px;
}
.light-grey-button {
background-color: #f0f3f4;
color: black;
padding: 10px 10px;
border: none;
text-align: center;
display: inline-block;
font-size: 14px;
margin-right: 10px;
}
</style>

Try adding functions for the button click handlers:

<div class="d-flex ml-6">
<button :class="{'dark-grey-button': isFreeItemMasterBtnClicked, 'light-grey-button': !isFreeItemMasterBtnClicked}" @click="onFreeItemMasterClick()">FreeItemMaster</button>
<button :class="{'dark-grey-button': isPatternMasterBtnClicked, 'light-grey-button': !isPatternMasterBtnClicked}" @click="onPatternMasterClick()">PatternMaster</button>
</div>

// inside setup script
  const onFreeItemMasterClick = () => {
      isFreeItemMasterBtnClicked.value = true;
      isPatternMasterBtnClicked.value = false;
  };

  const onPatternMasterClick = () => {
      isFreeItemMasterBtnClicked.value = false;
      isPatternMasterBtnClicked.value = true;
  };

If there are only two buttons to handle, single boolean variable should work. Complexity would be less.