Props not works as expected, updating of value doesn't work

[denislapi]

Expected Behavior

I want to detect changes of props in my chart component using $watch But I can't see the console.log() message in watch: { } that control value is changes from Parent component

This is how my code looks like:

Parent:

<template>
   <div>
      <chart-comp :control="controlData"></chart-comp>  
  </div>
</template>

<script>
   import chartComp from './charts/chartComp.vue';
   export default {
       components: {
           "chart-comp" : chartComp
       },
       data() {
           return {
               controlData: 2    // I can see this value in ready() when chartComp is loaded
           }
       },
       ready() {
           this.controlData = 5; // I want to set this value to prop "control" in chartComp
       }
  }
</script>

**Child (chartComp.vue) **

<script>
  import { Bar } from 'vue-chartjs'
  export default Bar.extend({	
  props:["control"],
     ready() {
        console.log("Control :" + this.control); // I can see the falue "2" from Parent element
        this.renderChart(); // Create chart when component is ready (This works good)
     },
     watch: {
     // Watch for changes of value. If values are changed, render chart again (This part doesn't work !)
        control() {
  	   console.log("Changes:" + this.control);
	   this.renderChart(); // Want to run this function when control value is changed
       }
    },
    methods: {
       renderChart() {
          // I have this function and all looks good with this part
      } 
   }			
})
</script>

Update:

I tried to set value using setTimeout() in child component and $watch works good. But seems like prop value is sent just one time (value from parent data() { } ) but when I set a new value in ready() of parent value is not sent again.

ready() {
  var self = this;
  console.log(this.control); // I can see this value "2" that is set in parent `data()`

  setTimeout(function() {
      self.control = 55; // I can detect this change in $watch. But looks like binding doesn't work in parent when I want to send again. Works just one time 
  }, 2000);
}

Actual Behavior

I want to run renderChart() function once props control is changed from Parent component.
But I can't detect the changes in watch: {} once the control is updated from Parent component

Environment

• vue.js version: ^1.0.7
• vue-chart.js version: ^1.1.5
• npm version: -/-

[apertureless]

Hey @denislapi

I will take a look into this.

However you're using Vue 1.x but you're calling renderChart? In vue-chartjs 1.x the render method is just called render() or do you wrapped the render() method into your own renderChart() ?

Moreover this seems to be more related to vue.js then vue-chartjs... but I will try to reproduce it.

[denislapi]

@apertureless Hey! Thank you for comment!
I fixed this using vueJS $broadcast so problem is fixed.
I thought that is some problem with vue-chartJS because I couldn't send data using props more then one time. But now its fixed!

Thank you for your wish to help me!