vue.js checkboxes not updating properly in chrome

I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.

these are the checkboxes:

<label class="list-display" for="list-box">
   <input type="checkbox" id="list-box" v-model="list"
    v-on:click='mini=!list'>
   <span class="switch">
     <p>list</p>
   </span>
</label>

<label class='list-display' for="mini-box">
   <input type="checkbox" id="mini-box" v-model="mini"
    v-on:click='list=!mini'>
   <span class="switch">
     <p>mini</p>
   </span>
</label>

and in data I declare

list: true,
mini: false,

It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false

Thank you for any help!