title: How can I get selected value on the dropdown with vue.js?
body: <p>I have parent component vue like this :</p>
  
  <pre><code>&lt;template&gt;
      &lt;form&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;form-select id="color" name="color" :data="color"&gt;Color&lt;/form-select&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;form-select id="size" name="size" :data="size"&gt;Size&lt;/form-select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          ...
          &lt;a href="javascript:" class="btn btn-danger" @click="add"&gt;
              Add
          &lt;/a&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import FormSelect from '../form/FormSelect.vue'
      export default {
          data(){
              return {
                  quantity: [
                      {id: 1, value: '1'},
                      {id: 2, value: '2'},
                      {id: 3, value: '3'}
                  ],
                  size: [
                      {id: 1, value: 'S'},
                      {id: 2, value: 'M'},
                      {id: 3, value: 'L'}
                  ]
              }
          },
          components: {FormSelect},
          methods: {
              add(event) {
                  const color = document.getElementById('color').value,
                        size = document.getElementById('size').value
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have child component vue like this :</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="form-group"&gt;
          &lt;label :for="id" class="control-label"&gt;&lt;/label&gt;
          &lt;select :id="id" :name="name" class="form-control" v-model="selected"&gt;
              &lt;option v-for="item in data"&gt;{{item.value}}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['id', 'name', 'data'],
          data(){
              return {
                  selected: ''
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I click add button, I success get values selected. But it still using javascript (document.getElementById)</p>
  
  <p>I want to change it. So I want to using data binding vue component. But i'm still confused to use it</p>
  
  <p>How can I do it with data binding?</p>