checkbox in vuejs and laravel - laravel-5

Question

I want to generate checkbox using v-for and use v-model. But i am having difficult time trying the get the value of checkbox. Here is what i am doing. My view looks like this:
<div class="checkbox" v-for="role in userRole">
<label>
<input v-model="newUser.urole" type="checkbox"
value="#{{role.roName}}">#{{role.roName}}</label>
</div>
Here is my Vue Js:
var emailRe = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*#([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i
var vm = new Vue({
el: '#userMgt',
data: {
newUser:{
fname: '',
mname: '',
lname: '',
email: '',
username: '',
password: '',
conpassword: '',
utype: '',
urole:''
},
},
methods: {
fetchUser: function () {
this.$http.get('../api/users', function (data) {
this.$set('users', data)
});
},
fetchUserType: function () {
this.$http.get('../api/usertype', function (data) {
this.$set('userType', data);
});
},
fetchUserRole: function () {
this.$http.get('../api/role', function (data) {
this.$set('userRole', data);
});
},
AddNewUser: function(){
//user input
var user = this.newUser;
alert(user.urole) ///not alerting right info
//clear form input
this.newUser = {fname:'',mname:'',lname:'',email:'',username:'',password:'',conpassword:'',utype:'',urole:''};
this.$http.post('../api/users', user);
;
},
selectAll: function(){
}
},
computed: {
},
ready: function () {
this.fetchUser();
this.fetchUserType();
this.fetchUserRole();
}
});
I am not able to get the selected value in newUser.urole and more over all my checkbox gets selected when i click one. How can i do this?. Thanks