Компоненты Vue

/** Параметры для компонента SelectUI */
<script>
    const people = [
        {
            id: 1,
            name: 'Петров Иван',
        },
        {
            id: 2,
            name: 'Самонов Александр',
        },
        {
            id: 3,
            name: 'Афиногенов Петр',
        },
        {
            id: 4,
            name: 'Мирнов Павел',
        },
        {
            id: 5,
            name: 'Афиногенов Петр',
        },
        {
            id: 6,
            name: 'Афиногенов Петр',
        },
        {
            id: 7,
            name: 'Афиногенов Петр',
        },
        {
            id: 8,
            name: 'Афиногенов Петр',
        },
        {
            id: 9,
            name: 'Афиногенов Петр',
        },
        {
            id: 10,
            name: 'Афиногенов Петр',
        },
    ];
    const label = 'Пример выпадающего списка на Vue';

    let app = new Vue({
        el: '#app',
        data () {
            return {
                options: people,
                label: label,
            }
        }
    });
</script>

/** Вызов компонента SelectUI */
<div id="app">
	<my-component :label="label" :options='options' ></my-component>
</div>

/** Компонент SelectUI */
<template>
   <div class="t-0">
        <div class="w-full left m-bottom-1/3">
            <label class=" bolder">{{ label }}</label>
        </div>

        <div class="">
            <button class="btn btn-white border-surface-inverse radius-1/2 m-bottom-1/2 color-on-surface w-full flex" v-on:click="changeState">
                <span class="w-full left">{{ selectedOptionName }}</span>
                <input type="hidden" :name="inputname" :value="selectedOptionId">
                <span class="absolute flex items-cross-center top-0 right-0 bottom-0 m-left-1 p-right-1/2">
                    <svg class="svg-1" x-description="Heroicon name: solid/selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </span>
            </button>
            <ul class="absolute mt-1  bg-surface-0 max-h-5 p-top-1/3 p-bottom-1/3 p-right-0 p-left-0 sf-scroll radius-1/2 l-none border-surface-inverse shadow-1 hidden" :name="id" :id="id" >
                <li class="relative bg-surface-0 hover:bg-yellow hover:c-white p-top-1/2 p-bottom-1/2 p-left-1 p-right-1 left cursor-pointer"
                    v-on:click="chooseOption(option.name)"
                    v-for="option in options" v-bind:key="option.id">
                    {{option.name}}
                </li>
            </ul>
        </div>
   </div>
</template>

<script>
    export default {
        name: 'SelectUI',
        props: ['options', 'label', 'isActive'],
        data() {
            return {
               id: 'ui-select-' + Math.floor(Math.random() * 1001),
               state: false,
               selectedOptionName: 'Не выбрано',
               selectedOptionId: '',
            }
        },
        methods: {
            changeState: function() {
                var selectUI = document.querySelector(`#${this.id}`);

                if (selectUI.classList.contains('hidden'))
                {
                    selectUI.classList.remove('hidden');
                    this.state = true;
                } else {
                    selectUI.classList.add('hidden');
                    this.state = false;
                }
            },
            chooseOption: function(name) {
                this.selectedOptionName = name;
                this.changeState();
            },
        },
    }
</script>