Vue Simple Component

HTML

<div id="app">
  <div class="card" v-for="item in items">
    <div class="card__name">{{ item.name }}</div>
    <vue-select v-model="selected" :options="item.versions"></vue-select>
  </div>
</div>

<template id="vue-select">
  <div class="vue-select">
    <div class="vue-select__trigger" @click="toggle">
      <div v-if="selected === null">Select version</div>
      <div v-else>{{ selected.name ? selected.name : selected }}</div>
    </div>

    <div class="vue-select__menu" v-show="isOpen">
      <div
        class="vue-select__item"
        @click="select(option)"
        v-for="option in options"
      >
        {{ option.name }}
      </div>
    </div>
  </div>
</template>

SCSS

.vue-select {
    margin: 8px;
    padding: 8px;
    &__menu {
      background-color: #fff;
    }
    &__trigger {
      cursor: pointer;
      background-color: #ccc;
      border-radius: 3px;
    }
    &__item {
      cursor: pointer;
      padding: 8px;
      &--disabled {
        opacity: 0.5;
      }
      &:hover {
        background-color: #ccc;
      }
      &:last-child {
        border-radius: 0 0 3px 3px;
      }
    }
  }
  
  .card {
    border: 1px solid red;
    margin-bottom: 8px;
    &__name {
      margin: 8px;
      padding: 8px;
    }
  }

Babel + JSX

Vue.component('vue-select', {
  template: '#vue-select',
  props: {
      options: {
        type: Array,
        default() {
          return [];
        },
      },
      value: {
        type: [Object, String, Number],
      },
    },
    data() {
      return {
        isOpen: false,
        selected: null,
      };
    },
    mounted() {
      document.addEventListener('click', this.handleClickOutside, true);
    },
    methods: {
      select(option) {
        this.$emit('select', option);
        this.$emit('input', option);
        this.selected = option;
        this.close();
      },
      toggle() {
        this.isOpen = !this.isOpen;
      },
      open() {
        this.isOpen = true;
      },
      close() {
        this.isOpen = false;
      },
      clearSelected() {
        this.selected = null;
      },
      handleClickOutside(e) {
        if (!this.$el.contains(e.target)) {
          this.close();
        }
      },
    },
    watch: {
    	value(val) {
        this.selected = val;
      },
      selected(val) {
        this.$emit('input', val);
      },
    },
});

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'Play station',
      versions: [{ name: 'PS3' }, { name: 'PS4' }, { name: 'PS4 PRO' }]
    }, {
      id: 2,
      name: 'MBP',
      versions: [{ name: 'Air' }, { name: 'PRO 2015' }, { name: 'PRO 2016' }]
    }, {
      id: 3,
      name: 'Xbox',
      versions: [{ name: '360' }, { name: 'One' }, { name: 'One S' }]
    }],
    selected: null,
  }
});