title: how to make el-select and v-model work together when extracting a custom component
body: <p>I'm using <a href="http://element.eleme.io/#/en-US/component/select" rel="nofollow noreferrer">el-select</a> to build a select component. Something like this:</p>
  <pre><code>&lt;template&gt;
      //omitted code
      &lt;el-select v-model=&quot;filterForm.client&quot;
                      filterable
                      remote
                      placeholder=&quot;Please enter a keyword&quot;
                      :remote-method=&quot;filterClients&quot;
                      :loading=&quot;loading&quot;&gt;
                  &lt;el-option
                          v-for=&quot;item in clientCandidates&quot;
                          :key=&quot;item._id&quot;
                          :label=&quot;item.name&quot;
                          :value=&quot;item._id&quot;&gt;
                  &lt;/el-option&gt;
              &lt;/el-select&gt;
  &lt;/template&gt;
  &lt;scripts&gt;
      export default {
          data() {
             filterForm: {
                  client: ''
             },
             clientCandidates: [],
             loading: false
          },
          methods: {
              filterClients(query) {
                  if (query !== '') {
                      this.loading = true;
                      setTimeout(() =&gt; {
                          this.loading = false;
                          this.clientCandidates = [{_id: '1', name: 'foo'}, {_id: '2', name: 'bar'}];
                      }, 200);
                  } else {
                      this.clientCandidates = [];
                  }
              }
          }
      }
  &lt;/scripts&gt;
  </code></pre>
  <p>So far so good, but since the component will appear in different pages, so I want to extract a custom component to avoid duplication.</p>
  <p>According to the <a href="https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components" rel="nofollow noreferrer">guideline</a>,</p>
  <pre><code>v-model=&quot;fullName&quot;
  </code></pre>
  <p>is equivalent to</p>
  <pre><code>v-bind:value=&quot;fullName&quot;
  v-on:input=&quot;$emit('input', $event)&quot;
  </code></pre>
  <p>So I extracted the select component like this:</p>
  <pre><code>&lt;template&gt;
  &lt;el-select
          v-bind:value=&quot;clientId&quot;
          v-on:input=&quot;$emit('input', $event)&quot;
          placeholder=&quot;Filter by short name&quot;
          filterable=&quot;true&quot;
          remote=&quot;true&quot;
          :remote-method=&quot;filter&quot;
          :loading=&quot;loading&quot;&gt;
      &lt;el-option
              v-for=&quot;item in clients&quot;
              :key=&quot;item._id&quot;
              :label=&quot;item.name&quot;
              :value=&quot;item._id&quot;&gt;
      &lt;/el-option&gt;
  &lt;/el-select&gt;
  &lt;/template&gt;
  &lt;scripts&gt;
  export default {
      props: {
          clientId: {
              type: String,
              required: true
          }
      },
      data() {
          return {
              clients: [],
              loading: false,
          }
      },
      methods: {
          filter(query) {
              if (query !== '') {
                  this.loading = true;
                  setTimeout(() =&gt; {
                      this.loading = false;
                      this.clients = [{_id: '1', name: 'foo'}, {_id: '2', name: 'bar'}];
                  }, 200);
              } else {
                  this.clients = [];
              }
          }
      }
  }
  &lt;/scripts&gt;
  </code></pre>
  <p>And the parent component looks like this:</p>
  <pre><code>&lt;select-client v-model=&quot;filterForm.clientId&quot;&gt;&lt;/select-client&gt;
  </code></pre>
  <p>The select drop down works fine, but unfortunately, the select does not reveal the option I selected, it remains empty after I choose an option. I suspect that maybe I should switch the <code>v-on:input</code> to 'v-on:change', but it does not work either.</p>
  <p><strong>UPDATE</strong>
  I created a simple example, you can clone it <a href="https://github.com/Hippoom/element-ui-questions/tree/el-select-as-component" rel="nofollow noreferrer">here</a>, please checkout the <code>el-select-as-component</code> branch. Run</p>
  <pre><code>npm install
  npm run dev
  </code></pre>
  <p>You will see a simple page with 3 kinds of select:<br />
  The left one is a custom component written in raw select, it works fine.<br />
  The middle one is a custom component written in <code>el-select</code>, the dropdown remains empty but you can see the <code>filterForm.elClientId</code> in the console once you click <code>Filter</code> button. This is why I raise this question.<br />
  The right one is a plain <code>el-select</code>, it works fine.</p>