Как передать вычисляемое свойство vuex в данные диаграммы vuejs?

Question

У меня проблема с созданием диаграммы, проблема в том, что данные диаграммы поступают из хранилища vuex в компонент vue, затем с помощью computed у меня есть функция, которая вносит некоторые изменения в данные, затем я пытаюсь передать эти новые данные в диаграмму данные с использованием метода.

Я попытался вызвать метод, который передает данные из вычисленных в данные диаграммы из mount (), созданного (), beforemount (), beforecreate (), и ничего не работает

ЭТО ЧАРТ КОНТЕЙНЕР VUE:

<template>
  <!-- Main content -->
  <section class="content">
         <div class="row">
           <div class="col-md-6">

             <!-- AREA CHART -->
                 <div class="grid">
                     <ChartPie/>
                 </div>
             <!-- AREA CHART -->

             <!-- AREA CHART -->
                 <div class="grid">

                 </div>

           </div>
           <!-- /.col (LEFT) -->

           <div class="col-md-6">
             <!-- AREA CHART -->
                 <div class="grid">

                 </div>
             <!-- AREA CHART -->

             <!-- AREA CHART -->
                 <div class="grid">

                 </div>

           </div>
           <!-- /.col (RIGHT) -->
         </div>
         <!-- /.row -->

       </section>
       <!-- /.content -->
     </template>





   <script>
      import ChartPie from "../components/chart-pie";
      export default {
        components: {
          ChartPie,
        }
      };
      </script>

ЭТО МАГАЗИН VUEX: Действия:

actions:{
loadMachines ({commit}){
            axios.get("api/machine")
            .then(data => {
                console.log(data.data)
                let machines= data.data.data
                commit('SET_MACHINES',machines)
            })
            .catch(error => {
                console.log(error)
            })
        },
        loadPrevents ({commit}){
            axios.get("api/prevent")
            .then(data => {
                console.log(data.data)
                let prevents= data.data.data
                commit('SET_PREVENTS',prevents)
            })
            .catch(error => {
                console.log(error)
            })
        },
}

Мутации:

SET_MACHINES (state, machines){
            state.machines=machines
        },
        SET_PREVENTS (state, prevents){
            state.prevents=prevents
        }

Состояние:

state:{
        intervenants: [],
        fabriquants: [],
        machines: [],
        prevents: []
    },

ЭТО ГРАФИК VUE: (САМОЕ ВАЖНОЕ)

<template>
  <div>
    <h2 class="bg-info text-center" >Nombre de panne par unité</h2>

    <div class="card">
      <chartjs-pie
        :bind="true"
        :datasets="datasets"
        :labels="labels"
        :option="option"
      />
    </div>
  </div>
</template>


<script>

import {mapState} from 'vuex'
export default {
  data() {
    return {
      loaded: false,
      datasets: [
        {
          data: [],
          backgroundColor: ["#b388ff", "#82b1ff", "#80d8ff", "#80d8ff", "#80d8ff", "#80d8ff", "#80d8ff"],
          hoverBackgroundColor: ["#673ab7", "#2196f3", "#03a9f4", "#03a9f4", "#03a9f4", "#03a9f4", "#03a9f4"]
        }
      ],
      labels: ["Meubles modulaires", "Les mètiers", "Meubles massifs", "Panoverre", "Métal design", "Poly-meuble", "L'art de salon"],
      option: {}
    }
  },
  mounted() {
    this.$store.dispatch('loadPrevents');
    this.$store.dispatch('loadMachines');
  },
  computed: {
    ...mapState([
        'prevents',
        'machines',
    ]),
      panne() {
      let machines_en_panne= []
      for (var i = 0, len = this.$store.state.prevents.length; i < len; i++) {
          machines_en_panne[i]= this.$store.state.prevents[i].machine ;
      }
      let countp= [0,0,0,0,0,0,0]
      for (var i = 0, len = this.$store.state.machines.length; i < len; i++) {
        if ( machines_en_panne.includes(this.$store.state.machines[i].nom) ){
          if (this.$store.state.machines[i].unite == 'Meubles modulaires')
          countp[0] ++;
          if (this.$store.state.machines[i].unite == 'Les mètiers')
          countp[1] ++;
          if (this.$store.state.machines[i].unite == 'Meubles massifs')
          countp[2] ++;
          if (this.$store.state.machines[i].unite == 'Panoverre')
          countp[3] ++;
          if (this.$store.state.machines[i].unite == 'Métal design')
          countp[4] ++;
          if (this.$store.state.machines[i].unite == 'Poly-meuble')
          countp[5] ++;
          if (this.$store.state.machines[i].unite == 'L\'art de salon')
          countp[6] ++;
        }
      }
      return countp;
    },
  },
  created(){
    this.datasets[0].data=this.panne
    this.loaded=true
  }
}
</script>

вы можете видеть в DevTools, что вычисляемое свойство получило правильные значения, но метод, который передает это значение в данные, делает это до того, как два maptate завершат загрузку данных, я так думаю, всегда получаю начальные значения [0,0,0 , 0,0,0,0]

Данные

Рассчитано

VueX

РЕДАКТИРОВАТЬ: SUPER WEIRD

Я поместил строку кодов, которые передают значение от computed в data () в себе, и знаю, когда я щелкаю компонент vue в devtools, он работает и повторно отображает диаграмму с правильными значениями. Что мне делать ????