title: Vue Custom Select Component with Object value
body: <p>I'm trying to implement custom select component with Vuejs 2. As stated in the documentation that i should not modify value props directly and suggested to use event to pass the selected data to parent component. I'm having issue when the option value is an object and got [Object object] instead.</p>
  
  <p>here's my select component template:</p>
  
  <pre><code>&lt;div :class="inputLength"&gt;
          &lt;select :id="id"
                  :value="value"
                  @change="setValue($event.target.value)"
                  :multiple="multiple"
                  class="selectpicker"&gt;
              &lt;option value=""&gt;Nothing selected.&lt;/option&gt;
              &lt;option :selected="option == value" v-for="option in options"
                      :value="option"&gt;
                  {{ option[label] }}
              &lt;/option&gt;
          &lt;/select&gt;
          &lt;span v-if="error.any()" class="help-block" v-text="error.all()"&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the script part:</p>
  
  <pre><code>export default {
      props: {
          value: {
              default() {
                 return ''
              }
          },
          options: {
              type: Array,
              require: true
          },
          ...
      },
      methods: {
          setValue(val) {
              this.error.clear();
              this.$emit('input', val);
          }
      }
  }
  </code></pre>
  
  <p>and here's the parent component</p>
  
  <pre><code>&lt;input-select-horizontal
      v-model="form.category"
      :label-class="{'col-md-4': true}"
      input-length="col-md-8"
      :options="categories.all()"
      label="name"
      :error="form.errors.get('category_id')"&gt;
  &lt;span slot="label"&gt;Category &lt;span class="required" aria-required="true"&gt;*&lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>the options:</p>
  
  <pre><code>[
      {
          id: 1,
          name: 'Category 1',
          description: 'desc 1'
      },
      {
          id: 2,
          name: 'Category 2',
          description: 'desc 2'
      },
      ...
  ]
  </code></pre>
  
  <p>I'm expecting the </p>
  
  <pre><code>form.category = {
      id: 1,
      name: "Category 1",
      description: "desc 1"
  }
  </code></pre>
  
  <p>but got [Object object]</p>
  
  <p>did i miss something?</p>