title: custom vue 3 form select not emit the correct model value
body: <p>I have created a select form component:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;col&quot;&gt;
          &lt;div class=&quot;row mb-4&quot;&gt;
              &lt;label class=&quot;col-sm-4 col-form-label col-form-label-sm&quot;&gt;{{ label }}&lt;/label&gt;
              &lt;div class=&quot;col-sm-8&quot;&gt;
                  &lt;select
                      class=&quot;form-select form-select-sm&quot;
                      :class=&quot;{'is-invalid': error}&quot;
                      :disabled=&quot;disabled&quot;
                      :value=&quot;modelValue&quot;
                      @change=&quot;updateSelect&quot;
                  &gt;
                      &lt;option
                          v-for=&quot;(option, index) in options&quot;
                          :value=&quot;option.id ? option.id : (option.value ? option.value : option)&quot;
                          :key=&quot;option.id ? option.id : index&quot;
                      &gt;
                          {{ option.name ? option.name : option }}
                      &lt;/option&gt;
                  &lt;/select&gt;
                  &lt;div class=&quot;invalid-feedback&quot; v-if=&quot;error&quot;&gt; {{ error }}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
      name: &quot;SelectForm&quot;,
      props: {
          label: {
              type: String,
              default: &quot;&quot;,
          },
          modelValue: {
              type: [String, Number, Boolean],
              default: &quot;&quot;,
          },
          error: {
              type: String,
              default: &quot;&quot;
          },
          disabled: {
              type: Boolean,
              default: false
          },
          options: {
              type: Object
          }
      },
      setup(props, { emit }) {
          const updateSelect = (event) =&gt; {
              emit(&quot;update:modelValue&quot;, event.target.value)
          }
  
          return {
              updateSelect
          }
      }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  
  </code></pre>
  <p>Options can be for ex:</p>
  <pre><code>['Test 1', 'Test 2']
  [{id: 1, name: 'Test 1'}]
  [{value: 'test1', name: 'Test 1'}]
  </code></pre>
  <p>So in the main component I have this:</p>
  <pre><code>&lt;select-form label=&quot;Status&quot; :options=&quot;userStatuses&quot; v-model=&quot;isActive&quot;/&gt;
  </code></pre>
  <p>where userStatuses object is this:</p>
  <pre><code>const userStatuses = ref([
     {name: 'Active', value: true},
     {name: 'Inactive', value: false}
  ])
  </code></pre>
  <p>The problem is when selecting a value 'Active' it sets the isActive model as &quot;true&quot; (as String - and I need as it is - boolean) and for Inactive =&gt; Object (this is what it says in Vue dev tools)</p>
  <p>I guess the problem is when returning back the model value</p>
  <pre><code>emit(&quot;update:modelValue&quot;, event.target.value)
  </code></pre>
  <p>I am not sure if I done it correct.</p>
  <p>Anyone know how to solve this ?</p>