Не получено правильное значение из метода клика

Question

Я пытаюсь получить значение из данных, контролируемых v-моделью внутри компонента.

Данные изменяются в приложении и в инструментах Vue dev, но если я консоль регистрирую эти данные, я всегда получаю предыдущее значение.

Приложение Vue Вот данные, которые яперехожу к компонентам

new Vue({
  el: "#app",
  data: {
    "children": {
        "haveAnyOtherDependents": 'yes',
        "havePets": 'no',
    },
  },
})

Vue Component Здесь я передаю нужные мне данные из приложения

// 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>

Вот скрипка, https://jsfiddle.net/yktoL8oz/

Answer 1

Как ответил в комментариях @Bert

Событие щелчка срабатывает до обновления модели.Используйте другое событие, например change "

Я изменил @click="sendData()" на @change="sendData()", и это решило проблему.