vue-chartjs component refresh

Two Issues really i'm curious about.

• The main issue is the toggle function. Currently the Toggle is changing the 'acute' value from false to true, which then means that the value being passed down to the child component changes, but I cant seem to get the chartjs to automatically change. How would that set up?
• Next would be is there an easier way of passing down information from parent to child instead of having ALL of those items each individually passed
• Finally, if you have refactoring advice I am all ears! ;)

Parent Component

import CommitChart from '../newChart'
      import Toggle from '../components/Toggle.vue';
      export default {
        components: {CommitChart, Toggle},
        name: 'UserGraph',
        data(){
          return {
            user: window.App.user,
            checked: false,
            // acute: false
            graphOptions: {
              acute: false
              }
            }
          },
        props:['outcome', 'title'],
        methods: {
          acuteOption(){
            // if acute is true, then filter graph based on patient.chronicity = 1.  Otherwise grab All
            return this.graphOptions.acute = !this.graphOptions.acute;
          }
        },
        computed: {
            psfsUserAvg(){
                let avgUserPsfsChg = 0;
                let initPsfs = 0;
                let finalPsfs = 0;
                let count = 0;
                let userPSFS = [];

                this.outcome.forEach((patient) => {

                    if( patient.user_id == this.user.id && patient.init_psfs != null && patient.final_psfs != null){
                        initPsfs += patient.init_psfs;
                        finalPsfs += patient.final_psfs;
                        count++;
                    }
                    avgUserPsfsChg = (finalPsfs / count) - (initPsfs / count);
                })

                userPSFS.push(avgUserPsfsChg.toFixed(1));
                userPSFS.push(avgUserPsfsChg.toFixed(1)*10); 
                return userPSFS;
            },
            psfsAvg(){
                let avgPsfsChg = 0;
                let initPsfs = 0;
                let finalPsfs = 0;
                let count = 0;

                this.outcome.forEach((patient) => {
                    if(this.graphOptions.acute == true){
                      if(patient.user_id != this.user.id && patient.init_psfs != null && patient.final_psfs != null && patient.chronicity == 1){
                        initPsfs += patient.init_psfs;
                        finalPsfs += patient.final_psfs;
                        count++;
                    }
                    }else{
                      if(patient.user_id != this.user.id && patient.init_psfs != null && patient.final_psfs != null){
                          initPsfs += patient.init_psfs;
                          finalPsfs += patient.final_psfs;
                          count++;
                      }
                    }
                    avgPsfsChg = (finalPsfs / count) - (initPsfs / count);
                })
                // return this.psfs.push(avgPsfsChg.toFixed(1));           
                return avgPsfsChg.toFixed(1);
            },

Child Component

import Chart from 'chart.js'
import { Bar } from 'vue-chartjs'
//extract to mixin eventually
Chart.scaleService.updateScaleDefaults('linear', {  
    ticks: {
        min: 0
    }
});
// import the component - chart you need

export default{
  extends: Bar,
  props: ['outcome', 'psfsAvg', 'psfsUserAvg', 'nprsUserAvg', 'nprsAvg', 'lefsUserAvg', 'lefsAvg', 'pcsUserAvg', 'pcsAvg'],
  data(){
    return{
      user: window.App.user,
      datacollection: {
          labels: ['PSFS', 'NPRS', 'LEFS', 'PCS'],
          datasets: [
            {
              fill: false,
              label: window.App.user.username,
              backgroundColor: '#36495d',
              borderColor: '#36495d',
              data: [this.psfsUserAvg[0], this.nprsUserAvg[0], this.lefsUserAvg[0], this.pcsUserAvg[0]]
            },
            {
              label: 'Avg User',
              backgroundColor: '#47b784',
              borderColor: '#47b784',
              data: [this.psfsAvg, this.nprsAvg, this.lefsAvg, this.pcsAvg]
            }
          ]
      },
    }
  },
  mounted () {
    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false, beginAtZero: true})
  // end of mounted()
  },
  watch:{
    data: function(){
      this.$datacollection._chart.destroy()
      this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false, beginAtZero: true})
    }
  }
}