checkbox

toggle

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<div class='container' id="app">
    <div v-for="item of items">
        <input disabled type="radio" name="test_checkbox" :checked="item.state"  v-on:click="alocked(item)" />
        <div>
        status: {{ item.state }}
        </div>
    </div>
    <button v-on:click="setlocked()">add</button>
        <button v-on:click="clearlocked()">clear</button>
    </button>
</div>

JavaScript

var amount = new Vue({
        el: '#app',
        data: function(){
            return {
              items: [{
                  state: false
              },{
                  state: false
              }]
          };
        },
        methods: {
            alocked: function (item) {
            		this.items.map(i => {
                    i.state = false;
                    return i;
                });
                item.state = true;
            },
            setlocked: function() {
            this.items.map(i => {
                    i.state = false;
                    return i;
                });
             this.items[1].state = true;
            },
            clearlocked: function() {
            	this.items.map(i => {
                    i.state = false;
                    return i;
                });
            }
          
        }
    });