Vue.js родитель не отправляет обновленные данные ребенку

Question

Я не могу обновить данные у ребенка от родителя. Родитель отправляет только исходные данные, но если я обновлю данные по функции, то получу их из Back-end, ничего не изменилось. Я даже сделал Wacher, он работает, затем данные изменились (записать слово отладки в консоли), но все еще не отправлять обновленные данные. Как мне использовать динамически измененные данные для обновления дочерних данных от родительских данных?

Родитель:

<el-date-picker
    v-model="reportMonth"
    type="month"
    format="MMMM yyyy"
    value-format="yyyy-MM-dd"
    placeholder="Choose month"
    @change="generateReport">
  </el-date-picker>

<bar-chart :parent-data="sendData"></bar-chart>

data() {
    return {
      monthData: null,
      sendData: {
        lowRiskPreliminary: 0,
        midRiskPreliminary: 0,
        highRiskPreliminary: 0,
        inadmissibleRiskPreliminary: 0,
        notValidPreliminary: 0
      }


watch: {
    monthData: function() {
      console.log('data changed!')
      this.sendData = this.monthData
    }
  },
  methods: {
    generateReport() {
      this.listLoading = true
      getMonthlyReport(this.reportMonth).then(response => {
        this.monthData = response.data }

Ребенок:

<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    parentData: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      chart: null,
      lowRisk: [this.parentData.lowRiskPreliminary],
      midRisk: [this.parentData.midRiskPreliminary],
      highRisk: [this.parentData.highRiskPreliminary],
      inhRish: [this.parentData.inadmissibleRiskPreliminary],
      notVal: [this.parentData.notValidPreliminary]
    }
  },
  mounted() {
    this.initChart()

methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.chart.setOption({

Answer 1

У вас есть примитивное значение undefined по умолчанию для parentData, и вы изменяете его на объект после обновления родительской переменной.Узнайте больше о реактивности в VueJS и предостережениях: https://vuejs.org/v2/guide/reactivity.html

Используйте $nextTick:

watch: {
     monthData: function() {
       this.$nextTick(function () {
           this.sendData = this.monthData
       })
    }
}

или используйте $ emit, чтобы отправить событие от родителя:

watch: {
    monthData: function() {

           this.$emit('monthDataUpdated', this.monthData);
    }
}

и у ребенка:

events: {
   'monthDataUpdated' : function(data){
     this.$nextTick(function () {
       this.parentData = data;
     });
   },
}

Answer 2

Напечатайте sendData в дочернем шаблоне, как этот {{sendData}}, и вы должны увидеть, как он меняется.