<template>
  <div class="select">
    <Select v-model="selected">
        <Option v-for="item in options" :value="item" :key="item">{{ item }}</Option>
    </Select>
  </div>
</template>
<script>
  export default {
    props: {
      value: String,
      options: Array,
    },
    data() {
      return {
        selected: this.value,
      }
    },
    watch: {
      selected(val) {
        this.$emit('input', val);
      },
      value: {
        immediate: true,
        handler(val) {
          this.selected = val;
        }
      }
    }
  }
</script>
<style lang="less">
  .color-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-input {
      flex-basis: 150px;
    }
  }
</style>