VueJS set first radiobutton as checked if v-model is empty - vue.js

Question

How can i have checked radio button in v-for, if my v-model is empty?
The list of users may be different, so I can't set selectedUserId: 665. I tried to use :checked="index == 0" but it does not work with v-model.
var radioVue = new Vue({
el: "#test",
data: {
selectedUserId: null,
users: [{id: 665, name: 'John'}, {id: 1135, name: 'Edward'}, {id: 7546, name: 'David'}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
<div v-for="(user, index) in users">
<input type="radio" :value="user.id" v-model="selectedUserId"> {{ user.name }}
</div>
<span>{{ selectedUserId}}</span>
</div>

Answer 1

You can use watch for that:
watch: {
selectedUserId: {
handler(newVal) {
if (newVal === null || newVal === undefined) {
this.selectedUserId = this.users[0].id
}
},
immediate: true
}
}

Answer 2

for this you can use get/set on computed variable with your v-model
the setter does a standard set while the getter return the wanted users id or if there is not the id of the first user (as in first entry of the array)
var radioVue = new Vue({
el: "#test",
data: {
selectedUserId: 7546,
users: [{id: 665, name: 'John'}, {id: 1135, name: 'Edward'}, {id: 7546, name: 'David'}]
},
computed: {
checkedUserId: {
get() {
// need to use == instead of === because v-model seems to set as string :/
return this.users.some(user => user.id == this.selectedUserId) ? this.users.filter(user => user.id == this.selectedUserId)[0].id : this.users[0].id
},
set(val) {
// doing a parseInt() here would allow you to use === in get
this.selectedUserId = val
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
<div v-for="user in users">
<input type="radio" :value="user.id" name="name" v-model="checkedUserId"> {{ user.name }} - {{ user.id }}
</div>
<span>{{ selectedUserId}}</span>
<input type="text" v-model="selectedUserId">
</div>