title: how to use v-model in nested custom components in vue.js?
body: <p>How can I use v-model for two level deep nested components?
  e.g. in HTML</p>
  
  <pre><code>&lt;opening-hr-field v-model="day"&gt; &lt;/opening-hr-field&gt;
  </code></pre>
  
  <p>here <code>day</code> is an object e.g. <code>{is24Open: true, startTime: '5:00 PM'}</code></p>
  
  <p> </p>
  
  <p>JS template</p>
  
  <pre><code>&lt;template type="text/x-template" id="opening-hr-field-template"&gt;
    &lt;div&gt;
      &lt;input type="checkbox" v-model="value.is24Open"&gt; 24 hour
       &lt;time-select v-model = "value.startTime"&gt;&lt;/time-select&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;template  type="text/x-template" id="time-select-template"&gt;
    &lt;select :value="value" 
      v-on:input="$emit('input', $event.target.value)"&gt;
      &lt;option v-for="t in getHours()"&gt;
        {{ t }}
      &lt;/option&gt;
    &lt;/select&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here, I have two level deep v-model. How can I propagate the emit from 2nd template to first template and all way up to the parent? Can you please show me an example? </p>