Cannot access this inside head

[komninoschatzipapas]

I have a component that calculates the page title on asyncData. It looks like this:

import { Component, Vue } from 'nuxt-property-decorator';

@Comonent({
  head() { return { title: this.title } },
  asyncData(ctx) {
    // Calculate title dynamically
    return { title: 'abc' }
  } 
})
export default Comp extends Vue {
  title!: string;
}

But I get an error while trying to access this inside head:

Property 'title' does not exist on type 'Vue'. Vetur(2339)

Is it possible to achieve this functionality? If yes, how exactly?

[amjmhs]

Why not use the head-hook ?

[maxdzin]

@komninoschat You can use it by specifying this as a parameter for the head. Using your example it will look this way:

import { Component, Vue } from 'nuxt-property-decorator';

@Comonent({
  head(this: Comp) { return { title: this.title } },
  asyncData(ctx) {
    // Calculate title dynamically
    return { title: 'abc' }
  } 
})
export default Comp extends Vue {
  title!: string;
}