Not getting correct value from click method - vue.js

Question

I am trying to get the value from a data controlled by v-model within a component.
The data changes in the app and in Vue dev tools but if I console log that data I always get the previous value.
Vue App
Here is the data I'm passing to the components
new Vue({
el: "#app",
data: {
"children": {
"haveAnyOtherDependents": 'yes',
"havePets": 'no',
},
},
})
Vue Component
Here I pass the data I need from the app
// button-group component
Vue.component('button-group', {
props: {
title: {
type: String
},
name: {
type: String
},
content: {
type: String
},
dataSource: {
type: String
}
},
data: function () {
return {
myTitle: this.title,
myName: this.name,
myContent: ''
}
},
created(){
this.myContent = this.setMyContent
},
methods: {
sendData: function(){
console.log('data: ', this.myContent, 'source', this.dataSource);
}
},
computed: {
setMyContent: function(){
return this.content
}
},
template: `
<div class="form-group row mb-1">
<br>
<div class="col-sm-6 pt-1 text-md" v-text="myTitle + ' = ' + myContent"></div>
<div class="col-sm-6 text-right">
<div class="btn-group m-0">
<label class="btn mr-05 p-0 rounded-left">
<input type="radio" :name="myName" value="no" v-model="myContent" #click="sendData()">
<span class="d-block p-1 px-3 text-sm rounded-left">
<i class="fas fa-check mr-1 text-xs"></i>No
</span>
</label>
<label class="btn p-0 rounded-right">
<input type="radio" :name="myName" value="yes" v-model="myContent" #click="sendData()">
<span class="d-block p-1 px-3 text-sm rounded-right">
<i class="fas fa-check mr-1 text-xs"></i>Yes
</span>
</label>
<label class="d-none btn p-0">
<input class="d-none" type="radio" :name="myName" value="unknown" v-model="myContent" #click="sendData()" checked>
<span class="d-block p-1 px-3 text-sm">
<i class="fas fa-check d-none mr-1 text-xs"></i>Unknown
</span>
</label>
</div>
</div>
</div>
`
});
// end button-group
HTML
<div id="app" class="container">
<button-group title="Other Dependants" name="other_dependents"
:content="children.haveAnyOtherDependents" data-source="children.haveAnyOtherDependents"></button-group>
<button-group title="Pets" name="pets" :content="children.havePets" data-source="children.havePets"></button-group>
</div>
Here is a fiddle, https://jsfiddle.net/yktoL8oz/

Answer 1

As answered in the comments by #Bert
The click event fires before the model is updated. Use a different event like change"
I changed the #click="sendData()" to #change="sendData()" and that solved the issue.