title: VueJS sending v-model property from child to parent
body: <p>Let's say I have a Vue component like this one:</p>
  
  <pre><code> Vue.component('child-comp',{
      props:['name', 'val'],
      data: function(){
         return {
             picked: ''
         }
      },
      template: '&lt;div&gt;&lt;input type="radio" :name="name" :value="val" v-model="picked"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;'
  });
  </code></pre>
  
  <p>And The Parent vue instance:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      message: 'Hello'
    }
  });
  </code></pre>
  
  <p>And in the HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;child-comp name="fruits" val="apple"&gt;Apple&lt;/child-comp&gt;
    &lt;child-comp name="fruits" val="banana"&gt;Banana&lt;/child-comp&gt;
    &lt;child-comp name="fruits" val="cherry"&gt;Cherry&lt;/child-comp&gt;
    &lt;p&gt;{{ picked }}&lt;/p&gt; &lt;!-- this throws an error --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I pass the v-model property <code>picked</code> from the child component to the root instance. Only way I know of is <code>$emit</code>ting an event from the child component and later capturing the passed data in root instance. But as you can see, to access a simple property, triggering an event is overkill. How can I access <code>{{ picked }}</code> within <code>&lt;p&gt;{{ picked }}&lt;/p&gt;</code></p>