Vue Head Is not reactive

[chaderenyore]

Suppose in my data I set articleTItle to null or ' ';

articleTitle: null,

and then in vue head

title: function () {
        return {
          inner: this.articleTitle,
          separator: "-",
          complement: "Coin Profit Blog",
        };
      },

It will take the null and stick to it alone, if the articleTitle should change the title doesn't change this.articleTitle = this.post.data.article_title;

Vue head is not reactive it doesn't react to the changes, it just takes the first value and stick to it. I reallly need it to be reactive so that after fecthing the blog data then the tile will change. I know this can be done with Nuxt well, but I'm not using Nuxt now, I really need this.

[kobayashi-naoki]

README helped me.

[AustinThornley]

Similar issue, my page title wasn't updating correctly if I was using a computed property for the title. I was able to use updated() lifecycle hook to help. Now whenever the component updates, it will make sure to update the article title.

Script articleTitle: null

updated() {
     // Simply set articleTitle here: 
     this.articleTitle = 'new title';
}

Template

<vue-head>
     <title>{{ articleTitle ? articleTitle : 'Fallback title' }}</title>
</vue-head>