vue.js如何如何实现点击document 让隐藏的下拉框功能

javascript:

new Vue({
el: "#app",
data:{
bisible: false,
tests: ['1','2']
},
methods: {
shows: function(){
this.bisible = true;
},
isibles: function(){
this.bisible = false;
}
}
})

html

<div id="app">
<div class="test" tabindex="1" @click="shows" @blur="isibles">
测试
<ul v-if="bisible">
<li v-for="item in tests">{{item}}</li>
</ul>
</div>
<div>
测试
</div>
</div>

css

.test{
border:1px solid #00F;
width: 50%;
}