encapsulate a select component, once written, test everything is normal, but goose, if the page is called multiple times, it will conflict. Expand one, all the components are expanded, select one, and all change with

select components

<template id="selectComponent">
    <div class="dropdown">
        <button class="form-control dropdown-toggle text-left" type="button">
            {{selectList[current]&&selectList[current].name}}
        </button>
        <div class="dropdown-menu btn-block" :class="{show:showSelect}">
            <button class="dropdown-item" type="button" v-for="(item,index) in selectList" :data-index="index">{{item.name}}</button>
        </div>
    </div>
</template>
<script>
var dataid = ("selectComponent" + new Date().getTime() + Math.random()).replace(".", "");
var tpEl = getDom("-sharpselectComponent").content.querySelector(".selectComponent");
tpEl.dataset.id = dataid;
Vue.component("selectComponent", {
    template: "-sharpselectComponent",
    data: function() {
        var vm = this;
        return {
            showSelect: false,
            current: 0,
        }
    },
    props: ["list"],
    computed: {
        selectList: function() {
            return this.list;
        }
    },
    mounted: function() {
        var vm = this;
        document.addEventListener("click", function(event) {
            var el = event.target;
            if (el.dataset.id == dataid || el.closest("[data-id=" + dataid + "]")) {
                if (el.classList.contains("dropdown-toggle")) {
                    vm.showSelect = !vm.showSelect;
                } else {
                    if (el.classList.contains("dropdown-item")) {
                        vm.current = el.dataset.index;
                    }
                    vm.showSelect = false;
                }
            } else {
                vm.showSelect = false;
            }
        }, false);
    },
    watch: {
        current: function(index) {
            this.$emit("change", index);
        }
    }
});
</script>

:
<select-component @change="change" :list.sync="[{value:1,name:"test"}]"></select-component>