nuxt.js data()の値が更新されない（様に見える）

前提・実現したいこと

nuxt.js(vue)でサイト開発をしているのですが、data()の挙動でうまくいかないところがあります。

発生している問題・エラーメッセージ

上の画像と下のコードをご覧いただければお分かり頂けると思いますが、dataの値が初期値のままであるかの様な挙動をしています。

ただ、devtoolsを見てみたところ、（title出ちゃうと都合悪いので隠しています）

上記はdevtoolsで見たdataの中身

この様に、devtoolsで見る限りは想定通りの挙動をしています。

該当のソースコード

data()で登録したものをcreated()に更新してheadで利用したいです

data(){
  return {
      pageTitle: '',
      pageDescription: '',
  }
},

(略)

created(){
   this.pageTitle = ここで動的にごにょごにょする
   this.pageDescription = ここで動的にごにょごにょする
},
  head(){
    return {
      title: `${this.pageTitle} | 〇〇`,
      meta: [
        { hid: 'description', name: 'description', content: this.pageDescription },
　　　　　（略）
      ],
    }
  }

どなたか御助力頂けると幸いです。

補足情報（FW/ツールのバージョンなど）

nuxt v2
vue v2.6.10

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようなcreatedで非同期処理を挟むようなコードでテストしてみましたが再現しませんでした。
created時の処理やその他の処理に問題がないか確認してみてください、それでも解決が難しいようであれば最終手段として$forceUpdate()を使ってください。

js
1export default {
2  head() {
3    return {
4      title: `${this.title}｜サイト名`,
5      meta: [
6        { hid: "description", name: "description", content: this.description }
7      ]
8    };
9  },
10  data() {
11    return {
12      title: "",
13      description: ""
14    };
15  },
16  methods: {
17    asyncFnc(value) {
18      return new Promise(resolve => {
19        setTimeout(() => {
20          resolve(value);
21        }, 1000);
22      });
23    }
24  },
25  created() {
26    Promise.all([
27      this.asyncFnc("タイトル"),
28      this.asyncFnc("ディスクリプション")
29    ]).then(response => {
30      [this.title, this.description] = response;
31    });
32  }
33};
34