vue 多次調(diào)用組件沖突

自己封裝了一個select的組件，寫好了，測試一切正常，然鵝，如果頁面調(diào)用多次的話，就沖突了。展開一個，所有組件都展開了，選擇一個，所有的都跟著變

select 組件

<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('#selectComponent').content.querySelector('.selectComponent');
tpEl.dataset.id = dataid;
Vue.component('selectComponent', {
    template: '#selectComponent',
    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>

調(diào)用方法：
<select-component @change="change" :list.sync="[{value:1,name:'test'}]"></select-component>