<template lang="pug">
div {{ isVisible }} !-- Reactivity OK, isVisible switch from false to true --!
</template>
<script>
export default {
  data() {
    return {
      isVisible: false
    }
  },
  computed: {
    availableLocales() {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
    }
  },
  methods: {
    showDropdown() {
      console.log(this.isVisible);
      this.isVisible = !this.isVisible;
    }
  }
}
</script>

<template lang="pug">
div {{ isVisible }} !-- Reactivity NOK, isVisible is always false when I click (but with a console.log, the value change) --!
</template>
<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => {
  return (locales.value).filter(i => i.code !== locale.value)
});
let isVisible = ref(false);
const showDropdown = () => {
  console.log(isVisible);
  isVisible = !isVisible;
}
</script>

isVisible = !isVisible;

isVisible.value = !isVisible.value