Vue.js Bootstrap 4 , cannot check radio button - vue.js

Question

I am trying to check by default the Mrs radio button... but it does not work ... I also tried to add a checked attribute wo any success //
what could be wrong with my coding ?
<div class="col-lg-9">
<form>
<!-- Full name -->
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<div class="input-group-text pb-0">
<label class="form-group-label active"><input v-model="gender" type="radio" value="Mrs"> Mrs</label>
</div>
<div class="input-group-text pb-0">
<label><input v-model="gender" type="radio" name="gender" value="Mr"> Mr</label>
</div>
</div>
<input v-model="username" #input="$v.username.$touch" v-bind:class="{ error: $v.username.$error, valid: $v.username.$dirty && !$v.username.$invalid }" type="text" class="form-control" placeholder="Indiquez votre prénom et votre nom">
</div>
</form>
</div>

Answer 1

This is how you might do it. I've added the toggle button to show how this binding works:
new Vue({
el: '#app',
data: {
radio: 'mrs',
},
methods: {
toggle() {
this.radio = this.radio === 'mrs' ? 'mr' : 'mrs';
}
},
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input v-model="radio" type="radio" value="mrs">
<label>Mrs</label>
<input v-model="radio" type="radio" value="mr">
<label>Mr</label>
<button #click="toggle">Toggle</button>
</div>
EDIT: Snippet fixed and updated

Answer 2

You need have the value for gender set in the data model.
https://www.codeply.com/go/KDKbm4PTBO
<label class="form-group-label active">
<input v-model="gender" type="radio" value="Mrs"> Mrs
</label>