Why cannot I hide a div with v-if?

Scenario: I have two options for a signup page. In the second one, I have a few more input elements and I only want to render that div when I click the second checkbox. For that, I wrote a v-if and it does not work properly.

(the project is in Vue)

<v-checkbox v-model="checkboxes" label="Bireysel Üyelik" value="checkbox-1"></v-checkbox>
<v-checkbox v-model="checkboxes" label="Kurumsal Üyelik" value="checkbox-2"></v-checkbox>

<div v-if="checkboxes === 'checkbox2'">
            <v-text-field
              name="cellPhone"
              label="Cep Telefonu"
              type="text"
              key="cell-phone"
              outlined
              dense
              required
            >
           </v-text-field>
</div>

data() {
    return {
      checkboxes: "",
      }
   }

The Html and JS files are as above. The data is dynamically changed in the Vue instance and there is no problem with that. The problem is with the conditional rendering mentioned above.