This only doesn't work when rendered server side!

I've got the problem, that dayJs doesn't update the locale globally after loading a page. While i18n works fine, dayJs doesn't update there.

In fact it switches to the locale for 1 second but then switches back to the defaultLocale set in the nuxt.config.js.

  async fetch() {
    const res = await this.$apollo.query({
      query: eventSeriesBySlug,
      variables: {
        'slug': this.$route.params.slug
      }
    });

    this.eventSeries = res.data.eventSeriesBySlug;

    // "en" or "de"
    this.locale = this.eventSeries.language.short;
    
    // i18n works
    this.$i18n.setLocale(this.locale);

    // does just update when rendered client side 
    this.$dayjs.locale(this.locale);
  }

I tried a watcher:

 watch: {
    locale(data) {
      this.$dayjs.locale(data);
    }
  },

It didn't change (although the watcher is called). It only works with setting the locale locally like:

this.$dayjs(event.dateStart).locale(this.locale).format('MMM')

But to save this locale in a store or pass it through all components isn't really a solution I would prefer. So any ideas on this?

And again: this only happens on rendered server side. When I navigate to the page by a nuxtlink / hot reloading is happening (so client side rendering) it's fine.