How to update head meta attribute after serverPrefetch? (Qv2 SSR)

[SuspiciousLookingOwl]

I'm using vue-class-component and vuex-module-decorators. This is how my code looks like

<template>
    {{ player }} <!-- Rendered properly on SSR -->
</template>

export default class Player extends Vue {
  @Prop() playerName!: string; // prop from router -> /player/:playerName
  
  get player() {
    return this.$store.state.player; // example computed data for getting store state
  }

  get mixins() {
    return [
      createMetaMixin({
        title: "Hello World",
      }),
    ];
  }

  /** SSR */
  async serverPrefetch() {
    const playerModule = getModule(PlayerModule, this.$store);
    await playerModule.getPlayer(this.playerName); // store module action to fetch data and set the module state
  }

The code above works fine, the data is fetched on server side, the <title> is set to Hello World and my component is prerendered on server side with the vuex store data.

However I wanted to change the rendered <title> dynamically to something like

  get player() {
    return this.$store.state.player;
  }

  get mixins() {
    return [
      createMetaMixin({
        title: `${this.player.name} Hello World`,
      }),
    ];
  }

But this doesn't seems to be working as mixins can't access this, when I do console.log(this) inside get mixins() {...}, I get MixedVue {} on the SSR console (I assume it's because mixins runs first before components)?.

I already tried to use composition reactive meta but it doesn't work either (updating the composition state doesn't update the title inside useMeta, I assume it's because the data isn't reactive in server side?).

P.S. I already added plugins: ["Meta"], to quasar.conf.js

[rstoenescu]

If you depend on some internal state of the component, then use the "Reactive" approach (supply a function instead of an Object).

createMetaMixin(function () {
  return {
    title: `${this.player.name} Hello World`,
  }
})

[SuspiciousLookingOwl]

This seems to only solves the reactivity issue in CSR, the title on SSR still isn't showing the correct title.

export default class Player extends Vue {
  title = "Foo";

  get mixins() {
    return [
      createMetaMixin(
        function (this: Player) {
          return {
            title: this.title,
          };
        } as MetaOptions /** createMetaMixin() only accepts object as parameter on Quasar's type definition, have to cast it here */
      ),
    ];
  }

  async serverPrefetch() {
    this.title = "Bar;";
  }
}

With that code, the rendered title on SSR is still Foo, not Bar

[usamaejaz]

Any answer?? I am also having the same issue. Is there no functional way to update meta data outside of setup function if its not going to be reactive in SSR?