[Vuejs]-Two-Way Binding in Component Scope

let id = 0;

Vue.component('question', {
  template: '#question',
  props: ['question'],
  data() {
    return {
      radioGroup: `question-${id++}`,
    };
  },
  methods: {
    onChange(choice) {
      this.question.selectedId = choice.id;
    },
    
    isChoiceSelected(choice) {
      return this.question.selectedId === choice.id;
    },
  },
});

new Vue({
  el: '#app',
  data: {
    questions: [
      {
        title: 'What is your favorite color?',
        selectedId: null,
        choices: [
          { id: 1, text: 'Red' },
          { id: 2, text: 'Green' },
          { id: 3, text: 'Blue' },
        ],
      },
      {
        title: 'What is your favorite food?',
        selectedId: null,
        choices: [
          { id: 1, text: 'Beans' },
          { id: 2, text: 'Pizza' },
          { id: 3, text: 'Something else' },
        ],
      },
    ],
  },
});

.question {
  margin: 20px 0;
}

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>

<div id="app">
  <question v-for="question of questions" :question="question"></question>
</div>

<template id="question">
  <div class="question">
    <div>{{ question.title }}</div>
    <div v-for="choice of question.choices">
      <input type="radio" :name="radioGroup" :checked="isChoiceSelected(choice)" @change="onChange(choice)"> {{ choice.text }}
    </div>
    <div>selectedId: {{ question.selectedId }}</div>
  </div>
</template>