JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div id="app">
    <ht-dropdown
      :status="initStatus"
      :options="htOptions"
      @updatehtdropdownstatus="updateHtDropdownStatus"
    >
    </ht-dropdown>
  </div>

SCSS

#app {
  text-align: center;
  margin-top: 30%;
}

.ht-dropdown {
  display: inline-block;


}

.ht-dropdown-status {
  border: 1px solid #000;
  padding: 8px 8px;
  position: relative;
  display: inline-block;
  background-color: #fff;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.65), rgba(0, 0, 0, 0.03));
  border-radius: 2px;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

.ht-dropdown-options {
  width: calc(100% - 2 * 8px);
  border: 1px solid #000;
  padding: 5px 8px;
  position: absolute;
  top: 33px;
  left: -1px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 8px 15px rgba(0,0,0,.2);
}

.ht-dropdown-option {
  padding: 4px;
  text-align: left;

}

.ht-dropdown-option:hover {
    background: #f7f7f7;
    text-decoration: none;
  }

.error-msg {
  color: red;
}

JavaScript

Vue.component('ht-dropdown', {
  template:`
    <div class="ht-dropdown">
      <div class="ht-dropdown-status" @click="toggle" @mouseleave="close">
        <p class="ht-dropdown-status-text" :title="statusTitle">{{ statusText }}</p>
        <div v-show="isShow" class="ht-dropdown-options">
          <div
            v-for="(option, statusId) in options"
            v-show="option.isShow"
            @click.stop="setStatus(option, statusId)"
            class="ht-dropdown-option"
            :title="option.optionTitle"
          >
            <p>{{ option.optionText }}</p>
          </div>
        </div>
      </div>
      <p class="error-msg">{{ errorMsg }}</p>
    </div>
  `,
  props: {
    status: String,
    options: Object,
  },
  data() {
    return {
      isShow: false,
      isError: false,
      errorMsg: ''
    }
  },
  computed: {
    statusText() {
      return this.options[this.status].statusText;
    },
    statusTitle() {
      return this.options[this.status].statusTitle;
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    },
    close() {
      this.isShow = false;
    },
    setStatus(option, statusId) {
      this.close();
      this.$emit('updatehtdropdownstatus', statusId, this.setErrorMsg);
    },
    setErrorMsg(errorMsg) {
      this.errorMsg = errorMsg;
    }
  }
})

let vm = new Vue({
  el: '#app',
  data: {
    initStatus: 'A',
    htOptions: {
      'A': {
        statusText: 'statusTextA',
        statusTitle: 'statusTitleA',
        optionText: 'optTextA',
        optionTitle: 'optTitleA',
        isShow: true
      },
      'B': {
        statusText: 'statusTextB',
        statusTitle: 'statusTitleB',
        optionText: 'optTextB',
        optionTitle: 'optTitleB',
        isShow: true
      },
      'C': {
        statusText: 'statusTextC',
        statusTitle: 'statusTitleC',
        optionText: 'optTextC',
        optionTitle: 'optTitleC',
        isShow: true
      },
      'D': {
        statusText:...