Vuejs Custom Select

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <div id="myComp">
        <div>
            <span>Color:</span>
            <select v-model="color">
                <option v-for="option in colors" :value="option.optionId">
                    {{ option.text }}
                </option>
            </select>
        </div>
        <div>
          <span>Color Custom: </span>
          <custom-select v-model="color" :options="colors"></custom-select>
        </div>
        <div>{{ this.$data }}</div>
    </div>
    
 <template id="custom-select">
    <select v-model="selected" @change="onChange($event.target.value)">
      <option v-for="option in options"
        :value="option.optionId"
      >{{option.text}}</option>
    </select>
</template>

Babel + JSX

Vue.component('custom-select', {
  template: '#custom-select',
  props: ['value', 'options'],
  computed: {
    selected () { return this.value }
  },
  methods: {
    onChange(value) {
    	if (value === '') {
      	value = null;
      }
    	this.$emit('input', value);
    }
  }
})

var app = new Vue({
    el: '#myComp',
    created: function () {
    	const vm = this;
      
    	setTimeout(function () {
      	vm.colors = [
        	{ text: 'Yellow', optionId: 'YELLOW'},
          { text: 'Not selected', optionId: null },
          { text: 'Blue', optionId: 'BLUE'}
        ];
      }, 1000);
    },
    data: {
      color: null,
      colors: []
    }
});