title: How to pass from a component to the parent a radio button choice?
body: <p>I am trying to replicate the <a href="https://v2.vuejs.org/v2/guide/components.html" rel="nofollow noreferrer">parent-child communication</a> in components. The idea is to have a two-choice component based on radio buttons, reused several times:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('chooser', {
    template: '&lt;form&gt; &lt;input type="radio" value="hello" v-model="picked"&gt; Hello&lt;br&gt;&lt;input type="radio" value="world" v-model="picked"&gt; World&lt;br&gt;&lt;/form&gt;',
    data: function() {
      return {
        picked: null
      }
    },
    watch: {
      picked: function() {
        this.$emit('picked')
      }
    }
  })
  
  var vm = new Vue({
    el: "#root",
    data: {
      first: null,
      second: null
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;
    &lt;chooser v-model="first"&gt;&lt;/chooser&gt;
    Here I want to get choice one: {{first}}
    &lt;chooser v-model="second"&gt;&lt;/chooser&gt;
    Here I want to get choice two: {{second}}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I do not get the information from the component back to the parent, why?</p>