DropDown.vue

<template>

<div class="spectrum-Dropdown" :class="{ 'is-open': showMenu }" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="true" @click="toggleMenu">
    <span class="spectrum-Dropdown-label">{{ displayedItem }}</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover" :class="{ 'is-open': showMenu }"
   style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li v-for="option in options" class="spectrum-Menu-item" :class="{ 'is-selected': (selectedOption.name == option.name)}"
       role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel" @click="updateOption(option)">{{ option.name }}</span>
        <svg v-if="selectedOption.name == option.name" class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark"
         focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

</template>

<script>
export default {
  name: 'DropDown',
  data() {
    return {
      selectedOption: { name: '' },
      showMenu: false,
      placeholderText: 'Please select an item',
    }
  },
  props: {
    options: {
      type: [Array, Object]
    },
    selected: {},
    placeholder: [String]
  },
  computed: {
    displayedItem() {
      return (this.selectedOption.name === '') ? (this.placeholder || this.placeholderText) : this.selectedOption.name
    },
  },
  mounted() {
    if (this.selected) { this.selectedOption = this.selected }
    if (this.placeholder) {this.placeholderText = this.placeholder }
  },
  methods: {
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    updateOption(option) {
      this.selectedOption = option;
      this.showMenu = false;
      this.$emit('updateOption', this.selectedOption);
    }
  }
}
</script>

<style scoped>
</style>