Vue.js上的语言切换

Question

在我的网站上有一个语言切换，它按标准工作，模板中有语言数组：

$headerBar = [
        'langs' => [
            [
                'name' => 'Українська',
                'img' => 'images/flags/ua.png',
                'code' => 'ua',
                'active' => true,
            ],
            [
                'name' => 'Русский',
                'img' => 'images/flags/ru.png',
                'code' => 'ru',
                'active' => false,
            ],
            [
                'name' => 'English',
                'img' => 'images/flags/uk.png',
                'code' => 'uk',
                'active' => false,
            ]
        ]

];

语言输出模板：

<template slot="language-bar">
        <language-switcher v-bind:langs='{!! json_encode($langs) !!}'></language-switcher>
</template>

组件vue.js本身：

<template>
    <div class="lang-currency-switcher-wrap" :class="{ show: isVisible }">
        <div class="lang-currency-switcher dropdown-toggle" @click="isVisible = true">
            <span class="language">
                <img :alt="activeLang.name" :src="activeLang.img"></span>
                <span class="currency">{{ activeLang.code }}</span>
            </div>
            <div class="dropdown-menu">
                <a v-for="lang in langs" v-if="!lang.active" class="dropdown-item">
                    <img :src="lang.img" alt="">{{ lang.name }}
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    export default {

        props: ['langs'],

        data() {
            return {
                isVisible: false
            };
        },

        computed: {
            activeLang() {
                let activeLang = [];

                for (let lang of this.langs) {

                    if (lang.active) {
                        activeLang = lang;
                    }
                }

                return activeLang;
            }
        },

        mounted() {

        }
    }
</script>

它的工作原理如下：服务器通过巧妙的计算呈现一组语言，其中一个是活动的，它都来自刀片模板，并且已经调用了vue.js组件

组件vue.js反过来输出除活动之外的可用语言列表，并且活动计算并显示给用户。

当用户点击语言包装器时，vue将显示整个可用列表。

现在的问题是：

如果用户点击网站的任何区域（大多数包装语言除外），如何正确隐藏所有语言？

同样有趣的是批评，也许它可以以更加美丽的方式以不同的方式完成：）

谢谢。