Javascript 渲染组件时，Vue检测单击外部

我在我的应用程序中实现了这个包。当我点击过滤器打开的按钮时，一切正常，当我点击组件外部时，过滤器关闭。但是，在第一次旋转完成后，如果我再次单击按钮，则“单击外部”功能也会启动，并且按钮不会打开

我的孩子/过滤器组件：

<div class="filter-container" v-click-outside="closeDropdown">

closeDropdown() {
      this.$emit("closeDropdown");
    },

<button @click="toggleFilter()">Filter</button>
<FilterDropdown v-if="showFilter" v-on:closeDropdown="closeDropdown"></FilterDropdown>

closeDropdown() {
      this.showFilter = false;
    },
toggleFilter() {
      this.showFilter = !this.showFilter;
    },

关闭下拉列表（）{
此.$emit（“关闭下拉菜单”）；
},

我的父组件：

<div class="filter-container" v-click-outside="closeDropdown">

closeDropdown() {
      this.$emit("closeDropdown");
    },

<button @click="toggleFilter()">Filter</button>
<FilterDropdown v-if="showFilter" v-on:closeDropdown="closeDropdown"></FilterDropdown>

closeDropdown() {
      this.showFilter = false;
    },
toggleFilter() {
      this.showFilter = !this.showFilter;
    },

过滤器
关闭下拉列表（）{
this.showFilter=false；
},
toggleFilter（）{
this.showFilter=！this.showFilter；
},

何时将此.showFilter重置为

true

？我编辑了我的帖子，以便更清晰。