MaxRyazan

import {Directive, DirectiveBinding} from "vue";

export const clickOutside: Directive<HTMLElement, string> = {
    mounted(el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.addEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                   bind.value()
                }
            })
        }
    },
    unmounted: function (el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.removeEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                    bind.value()
                }
            })
        }
    }
}

<div v-click-outside="() => isFilterOpen = false">
   ....
 </div>

<a-config-provider :locale="currentLang">
        <router-view v-slot="{ Component }">
            <transition name="router" mode="out-in">
                <component :is="Component"></component>
            </transition>
        </router-view>
    </a-config-provider>

const currentLang = ref(lang[CURRENT_LOCALE.value])

watch(CURRENT_LOCALE, () => {
    currentLang.value = lang[CURRENT_LOCALE.value]
})

export enum LOCALES {
    ru = 'ru',
    en = 'en'
}

export const CURRENT_LOCALE: Ref<Locale> = ref(LOCALES.ru)

<component :is="currentComponent" />
<button @click="currentComponent = ComponentTwo">Switch to component2</button
<button @click="currentComponent = ComponentThree">Switch to component3</button

import ComponentOne from '...'
import ComponentTwo from '...'
import ComponentThree from '...'

const currentComponent = shallowRef(ComponentOne)

const table_headers = ref([
        {name: "family_name", label: "Фамилия", widget_type: 'TextWidget', component: ComponentOne},
        {name: "given_name", label: "Имя", widget_type: 'TextWidget', component: ComponentTwo},
        {name: "date_of_birth", label: "Дата рождения", widget_type: 'TextWidget', component: ComponentThree},
    ])

<component
      :is="col.component"
      :widget_name="[[col.name]]"
      :widget_label="[[col.label]]"
    ></component>

state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },

const app = createApp()
app.mount()

<div>
   <h3>{{ t(`tos.fundamentals.['1'].title`) }}</h3>
   <p>{{ t(`tos.fundamentals.['1'].body`) }}</p>
</div>

Component.vue
<script setup lang="ts">
const props = defineProps<{
    imgSrc: string
}>()
</script>
<template>
    <img :src="props.imgSrc" />
</template

<template>
   <component imgSrc="./assets/img.png" />
</template