title: How to make Vue component work with v-model preserving value type?
body: <h2>Problem</h2>
  
  <p>When I'm having a <code>v-model</code> on a HTML <code>&lt;select&gt;</code>, <code>v-model</code> is setting the given property to selected value preserving types of that values - if I bind a number to <code>&lt;option&gt;</code>, model property is set to number, if I bind an Object it's set to that Object.</p>
  
  <pre><code>&lt;script&gt;
  export default {
    data: {
      options: [5, 10, 15, 'text', { 'description': 'I am an Object' }],
    }
  };
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;select v-model="model"&gt;
      &lt;option
        v-for="option in options"
        :value="option"
      &gt;
        {{ option }}
      &lt;/option&gt;
    &lt;/select&gt;
  &lt;template&gt;
  </code></pre>
  
  <p>I'm having a <code>&lt;base-select&gt;</code> custom component, which is wrapping the usage of <code>&lt;select&gt;</code> tag for me. I'm trying to implement the same <code>v-model</code> behavior for it, but am failing, because the types are not preserved - I'm returned Strings all the time, even when I'm binding numbers or objects.</p>
  
  <pre><code>//// BaseSelect.vue
  
  &lt;script&gt;
  export default {
    props: {
      options: {
        type: Array,
        required: true
      },
      value: {
        required: true
      }
    },
  };
  &lt;/script&gt;
  &lt;template&gt;
    &lt;select
      :value="value"
      @input="$emit('input', $event.target.value)"
    &gt;
      &lt;option
        v-for="option in options"
        :value="option"
      &gt;
        {{ option }}
      &lt;/option&gt;
    &lt;/select&gt;
  &lt;/template&gt;
  
  //// App.vue
  
  &lt;script&gt;
    @import 'BaseSelect' from './BaseSelect';
  
    export default {
      components: {
        BaseSelect,
      },
      data: {
        options: [5, 10, 15, 'text', { 'description': 'I am an Object' }],
      }
    };
  &lt;/script&gt;
  &lt;template&gt;
    &lt;base-select
      v-model="model"
      :options="options"
    /&gt;
  &lt;template&gt;
  </code></pre>
  
  <h2>Fiddle</h2>
  
  <p>Here is where this behaviour is clearly visible: <a href="http://jsfiddle.net/4o67pzLs/14/" rel="nofollow noreferrer">http://jsfiddle.net/4o67pzLs/14/</a></p>
  
  <p>The first select is preserving types of values bound to model, while the other one is all the time setting values to Strings.</p>
  
  <h2>Question</h2>
  
  <p>Is it possible to implement <code>v-model</code> on custom component, which would preserve types? If so, how?</p>