Vue.jsのコンポーネント内のデータが更新されません。

Vue.jsを用いて取得したco2濃度をグラフにするという処理を作ろうとしていますが、コンポーネント内でのデータの扱いに苦戦しております。
以下のコードでdata()内のtimeとvalueに要素を追加しても、A・Bの部分が更新されません。

js
1Vue.component("chart", {
2  extends: VueChartJs.Line,
3  mixins: [reactiveProp],
4  props: ["d"],
5  data() {
6    return {
7      time: [],
8      value: [],
9      // グラフに描画するデータ
10      data: {
11        labels: this.time, // A
12        datasets: [
13          {
14            label: "co2濃度(ppm)",
15            data: this.value, // B
16          },
17        ],
18      },
19      // グラフのオプション
20      options: {
21        responsive: true,
22        maintainAspectRatio: false,
23      },
24    };
25  },
26  mounted() {
27    this.renderChart(this.data, this.options);
28  },
29  watch: {
30    // co2濃度の時間あたりのデータに更新があった場合
31    // 最新の１つを取り出してthis.timeとthis.valueに加える。
32    d() {
33      const v = this.d.slice(-1)[0]; // Ex) v = {time: "17:00", value: 1205}
34      this.time.push(v.time);
35      this.value.push(v.value);
36    },
37  },
38});
39

chromeのVue developer tools を見る限り、timeとvalueは更新されておりますがA・Bの部分は更新されておらずArray[0]のままでした。

バージョン
Vue.js 2.6.12
Vue-chart.js 最新
Chart.js 2.7.1

thisの取り扱いやvueのリアクティブあたりを睨んで色々調べたのですが、解説せず質問させていただきました。よろしくお願いいたします。

追記です。

上記のコードにおいて初期値を以下のように変更したところ

js
1  data() {
2    return {
3      time: [1],
4      value: [1],
5   ...

赤で印をつけた初期値が、青のdata labelsに反映されませんでした。

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

回答1件

ベストアンサー

this.timeがその時点での値コピーとなっているような挙動でしょうか。
構文として正しく動くか試していませんが、同じ参照を明示するために下記のようなコードにすると、どうなりますでしょうか。

js
1data() {
2  const vtime = [];
3  return {
4  time: vtime,
5  data: {
6    labels: vtime

投稿2020/10/30 05:10

plasticgrammer

総合スコア629

hososo

2020/10/30 05:23

回答してくださったコードで解決できました！よろしければどうしてこのコードで解決できるか教えていただけないでしょうか？ > this.timeがその時点での値コピーとなっているような挙動でしょうか。初期値がArray[0]だったのでそうおもったのですが、試してみるとそうではないようです...? 回答に補足として記述させていただきます。

hososo

2020/10/30 05:30

すみません。ミスです。回答に補足→質問に補足