LaravelからVueに渡した配列をvue-chart.jsで使用したい

Question

問題点

LaravelからVueに配列を渡すことができているのは確認済みなのですが、Vue.jsでvue-chart.jsを利用しようとdataに渡した配列を入れても何も入っていない時と同じ動作をします。
どうすれば有効になるのか、改善点のご指摘をお願いいたします。

発生している問題のコード

                        <task-chart :times='@json($content_task_time)'>
                        </task-chart>

上記のコードで配列をVueの方に配列を渡しました。

<script>  
import { Bar } from 'vue-chartjs' 
 
//ネットにあったものをコピペしているだけなのでlabelがおかしいのは気にしないでください
export default {  
  props: ["times"],
  extends: Bar,  
  data: () => ({  
    chartdata: {  
      labels: ['January', 'February'],  
      datasets: [  
        {  
          label: 'Data One',  
          backgroundColor: '#f87979',  
　　　　　　//ここが問題の部分
          data: [this.times],  
        }  
      ]  
    },  
    options: {  
      responsive: true,  
      maintainAspectRatio: false  
    }  
  }),  

  mounted () {  
    this.renderChart(this.chartdata, this.options)  
  }  
}  
</script>  

このデータに変数を入れても何も入っていないという動作を起こします。

Answer 1

data: [this.times],
について
data: this.times,
だとどうでしょうか?

Comments

[Himajin_akisyou]

回答ありがとうございます。
結果は変わりませんでした。

<template>
<div>
{{times}}
</div>
</template>
<script>
export default {
props:["categories"],
mounted () {
console.log(this.categories)
　　}
}

で配列の受け渡しの確認したところ、[ 0, 6275 ]のような形で表示されていました。

Answer 2

コンポーネントが使われてない気がします。
app.jsの中身はどのようになっていますか？
エラーは吐いてないでしょうか？

Comments

[Himajin_akisyou]

ご回答ありがとうございます。

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
//下のもの以外は変えていません
Vue.component('task-chart', require('./components/Chart.vue').default);

const app = new Vue({
el: '#app',
});

app.jsは上記のようになっております。
コマンドでビルドした時は成功したというメッセージが出ますのでエラーは吐いていないと思われます。
また、配列が渡っているかを確認するために下の方のアンサーに回答させていただいたようなコードを試したところ渡せていたことを確認できました。

[minrara]

mountedはDOMの生成時に実行されるので、この場合mountedでチャートが描画されてからtimesに値が入っているので描画時にはデータが空です。

正直このデータの受け渡し方だと、vue-chart使う意味がまったくないので、配列ではなくchartDataのオブジェクトで渡すか、apiで取ってくるかしたほうがいいと思います。
どうしても配列で渡したい場合はchart.jsの書き方でやったほうがうまくいきます。

[Himajin_akisyou]

ありがとうございます。教えてくださった別の方法でやってみます。