Question: I am trying to get one checkbox to uncheck another (kinda like radio buttons). I am a little bit of a Vue noob so I am not sure what I am doing wrong. Here are the two inputs.

```
<label for="'product-'+product.id"
     class="none addon_label"
     :class="{'addon_selected': !selected}"
     >

<input class=""
       type="checkbox" 
       :id="'product-'+product.id"
       :value="false"
       v-model="selected"/>

<div class="v-center">None</div>
</label>

<label :for="'product-'+product.id"
     class="is_flex addon_label"
     :class="{'addon_selected': selected}"
     :data-product-id="product.id">
<div class="checkbox-container">
<input class=""
       type="checkbox"
       :value="true"
       :id="'product-'+product.id"
       v-model="selected"/>
</div>

```

[Recording of the problem](https://i.stack.imgur.com/Z5saU.gif)

Answer: 
You can use radio buttons instead of checkbox:

```js
new Vue({
  el: "#demo",
  data() {
    return {
      product: {id: 1},
      selected: false
    }
  }
})
```

```css
.addon_selected {
  border: 1px solid black;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <label for="'product-'+product.id"
       class="none addon_label"
       :class="{'addon_selected': !selected}"
       >
  <input class=""
         type="radio" 
         :id="'product-'+product.id"
         :value="false"
         v-model="selected"/>
  </label>
  <label :for="'product-'+product.id"
       class="is_flex addon_label"
       :class="{'addon_selected': selected}"
       :data-product-id="product.id">
  <input class=""
         type="radio"
         :value="true"
         :id="'product-'+product.id"
         v-model="selected"/>

  </label>
</div>
```
You can try this.

```
<label for="'product-'+product.id"
     class="none addon_label"
     :class="{'addon_selected': !selected}"
     >

<input class=""
       type="radio" 
       :id="'product-'+product.id"
       :value="checkStatus"
       @change="check($event.target.value)"/>

<div class="v-center">None</div>
</label>

<label :for="'product-'+product.id"
     class="is_flex addon_label"
     :class="{'addon_selected': selected}"
     :data-product-id="product.id">
<div class="checkbox-container">
<input class=""
       type="radio"
       :value="checkStatus"
       :id="'product-'+product.id"
       @change="check($event.target.value)/>
</div>

```

In your script of component, you can define method check() inside of methods.

```
<script>
export default {
    data() {
        return {
            checkStatus: false
        }
    },
    methods: {
        check: function(val) {
              this.checkStatus = !val;
        }
    },
}
</script>

```