【Vue】chartjsをループで複数表示する際に、データを連想配列で紐づけようとしてInvalid prop が発生する

Question

概要

Vueにおいてchartjsを利用して各ユーザーごとのグラフをループで表示しています。
ユーザーごとのデータを判別するために、連想配列を用いています。

困っている事

グラフは正しく表示されるのですが、コンソールに表示される下記warningが消せません。

[Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Undefined 

想定している流れ

1. 画面起動時にDBからユーザーのリストを取得する
2. 各ユーザーの情報をDBから取得する
3. 取得したユーザーの情報をchartItems[ユーザー名]のオブジェクトに入れる
4. chartjsでグラフが反映される

試した解決方法

こちらにほぼ回答に近い記事があります。
https://nplll.com/2019/05/vue-chartjs_error/
https://www.ultra-noob.com/blog/2020/50/
しかし解決されませんでした。
chartItems[ユーザー名] = {オブジェクト} という構造の違いが問題でしょうか。。

コード

実際のコードとは異なりますが、簡潔に要所のみを抜き出しています。

<template>
  <div v-for="User in Users" :key="User.name">
  
     <BarChart v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/>

  </div>
</template>

<script>

  data () {
      return {
        Users:[]
        chartItems: { labels:[], datasets: [] },
      }
    },


  created () {
    this.setChart()
  },

  methods:{
    setChart(){
      this.$axios.$post(/getUsers)
        .then(res=> {
            // APIを実行してユーザー情報を取得します。仮に下記のようなデータが取得されると仮定します。
            this.Users = [{name:"Arisa", id:1111}, {name:"Bob", id:2222}, {name:Charley, id:3333}]
        })

      this.Users.foreach(user=>{
          var obj = {
          labels: [1,2,3,4,5],
          datasets: [{
            label: "フォロワー数",
            data: this.Data[user.name], // 別途APIから取得したData[ユーザー名]の連想配列があります。
          }]
          }
          
          // ここでchartDataにバインドするchartItems[ユーザー名]をセットします。
          this.$set(this.chartItems, user.name, obj) 

        })
    }
  }

</script>

知りたい事

「レイアウトが作成される段階ではchartItems["Arisa"]やchartItems["Bob"]は存在しないのでwarningが表示されるが、this.$setでchartItems["Arisa"]などが検知されて結果として表示は問題ない」という解釈で相違ないでしょうか。

また、エラーを表示させない方法も知りたいですが、そもそもの画面表示が問題なくできてしまっている以上、このwarningは無視するというのもひとつの解決でしょうか。

素人質問で大変恐縮でございますが、何卒よろしくお願いいたします。

Answer 1

v-ifを追加することで解決できました。

<template>
  <div v-for="User in Users" :key="User.name">
  
     <BarChart  v-if="chartItems[User.name]"  v-bind:chartData="chartItems[User.name]" :options="Options" :styles="chartSize"/>

  </div>
</template>

chartItems[User.name]がまだ存在しない時は、後ろのchatDataのbindが関係なくなるので、
結果としてwarningが消えたのだと考えられます。

@Matsumon0104様ご助言のもと解決いたしました。
ありがとうございました！