title: How to set reactive locale in all Vue3 Components?
body: <p>I have following project structure (<code>index.vue</code>):</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;navbar&gt;&lt;/navbar&gt;
      &lt;social-media-bar&gt;&lt;/social-media-bar&gt;
      &lt;main&gt;
        &lt;home&gt;&lt;/home&gt;
        &lt;news&gt;&lt;/news&gt;
        &lt;vision&gt;&lt;/vision&gt;
        &lt;event-section&gt;&lt;/event-section&gt;
        &lt;artwork&gt;&lt;/artwork&gt;
        &lt;about&gt;&lt;/about&gt;
        &lt;donate&gt;&lt;/donate&gt;
        &lt;contact&gt;&lt;/contact&gt;
        &lt;partners&gt;&lt;/partners&gt;
      &lt;/main&gt;
      &lt;footer-component&gt;&lt;/footer-component&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>I want to change the <code>app-language</code> from inside <code>navbar.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;nav-bar&quot;&gt;
      &lt;fa class=&quot;icon-locale&quot; @click=&quot;toggleLocale&quot; :icon=&quot;[ 'fa', 'language' ]&quot; size=&quot;2x&quot;&gt;&lt;/fa&gt;
      &lt;div class=&quot;locale-menu&quot; :class=&quot;{ locale__open: isActiveLocale }&quot;&gt;
        &lt;p @click=&quot;toggleLocale(); setLocale('en');&quot;&gt;en&lt;/p&gt;
        &lt;p @click=&quot;toggleLocale(); setLocale('de');&quot;&gt;de&lt;/p&gt;
        &lt;p @click=&quot;toggleLocale(); setLocale('ar');&quot;&gt;ar&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  import {ref} from &quot;vue&quot;;
  import {createI18n} from 'vue-i18n';
  
  const isActiveLocale = ref(false);
  const toggleLocale = () =&gt; {
      isActiveLocale.value = !isActiveLocale.value;
  }
  const i18n = createI18n({});
  const setLocale = (locale) =&gt; {
      i18n.global.locale = locale
  };
  &lt;/script&gt;
  </code></pre>
  <p>Basically this opens a <code>locale menu</code> with <code>en, de, ar</code> locales which start an <code>@click</code> event that changes <code>i18n.global.locale</code> accordingly.</p>
  <p>I need to set the newly set <code>i18n.global.locale</code> in the <code>home</code> component.</p>
  <p><strong><code>home.vue</code></strong>:</p>
  <pre><code>&lt;template&gt;
    &lt;section id=&quot;home&quot; class=&quot;home&quot;&gt;
      &lt;h2&gt;{{ state.heading[state.locale] }}&lt;/h2&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  
  &lt;script setup&gt;
  import {reactive} from 'vue';
  import {useI18n} from 'vue-i18n';
  
  const {locale} = useI18n()
  const loc = locale.value.substring(0, 2)
  
  const state = reactive({
      locale: loc
  })
  &lt;/script&gt;
  </code></pre>
  <p>What I want is to get the newly set <code>i18n.global.locale</code> from <code>navbar.vue</code> into <code>state.locale</code> in <code>home.vue</code> reactively. Since <code>navbar</code> and <code>home</code> are no <code>parent/child</code>, do I have to build an <code>EventBus</code> for this or is there a more elegant solution, maybe with the <code>i18n</code> library?</p>
  <p><strong>Edit:</strong></p>
  <p>This is the function, that is supposed to change <code>locale</code> globally but it only sets it inside <code>i18n</code> and it looks like the only reactivity possible with that is with <code>i18n</code>'s <code>messages</code>, which I am not using.</p>
  <pre><code>const setLocale = () =&gt; {
      i18n.global.locale = 'de'
      console.log(i18n.global.locale);
  };
  </code></pre>
  <p>I need to change the locale string globally, so that I can use it in all components reactively.</p>