vue js dropdown custom

Dropdown.vue

<template>
  <div class="drop-element" tabindex="0" @blur="closeDrop"> 
    <div class="drop-element__inner" :class="isOpen? 'drop-open': ''">
      <span @click="openDrop">{{ selectedItem.label}}</span>
      <ul v-show="isOpen">
        <li 
          v-for="(option,i) in options" 
          :key="i"
          :class="selectedItem.value == option.value ? 'active' : ''"
          @click="optionSelection(option)">{{ option.label}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Dropdown',
  data() {
    return {
      selectedItem: {},
      isOpen: false
    }
  },
  props: {
    options: Array
  },
  methods: {
    openDrop() {
      this.isOpen = !this.isOpen;
    },
    closeDrop() {
      this.isOpen = false;
    },
    optionSelection(option) { 
      this.selectedItem = option;
      this.$emit('getSelection', this.selectedItem);
      this.isOpen = false;
    }
  },
  mounted() {
    this.selectedItem = this.options[0];
    this.$emit('getSelection', this.selectedItem);
  },
}
</script>
<style>
.drop-element {
	&__inner {
		width: 100%;
		min-height: 50px;
		border: 1px solid color(quick-silver);
		border-radius: 40px;
		background: $white;
		position: relative;
		span,
		li {
			font-size: 16px;
			line-height: 24px;
			letter-spacing: 0.5px;
			font-family: $font-family-base;
			font-weight: $font-weight-normal;
			cursor: pointer;
			color: color(feldgrau);
		}
		span {
			display: flex;
			padding: 13px 30px;
			border-radius: 40px;
			gap: 8px;
			font-family: $font-lota-regular;
		}
		ul {
			position: absolute;
			width: calc(100% + 2px);
			background: $white;
			padding: 0;
			margin: 0;
			list-style: none;
			z-index: 10;
			border-radius: 0 0 15px 15px;
			margin-left: -1px;
			margin-top: -2px;
			padding: 0 0 10px;
			li {
				padding: 6px 30px 7px;
				line-height: 17px;
				&:hover,
				&.active {
					background: color(indigo-1);
					color: $white;
				}
			}
		}
		&.drop-open {
			border-radius: 15px 15px 0 0;
			span {
				border-radius: inherit;
			}
			ul {
				border: 1px solid color(quick-silver);
				border-top: none;
			}
		}
	}
}</style>