Ticks not working with reactive props

[joe642]

Expected Behavior

The Y axis scale should be returned as a formatted string with a £ sign.

Actual Behavior

The callback works, but only when the data is loaded when the graph is loaded up empty

When the data is added in, the callback is not executed at all

<script>
  import { Line, mixins } from 'vue-chartjs'
  import functions from '../../functions';

  export default Line.extend({
    mixins: [mixins.reactiveProp],
    methods: {
      render() {
        console.log(this.chartData);
        if (this.chartData) {
          this.renderChart(
            this.chartData, 
          {
            responsive: false,
            maintainAspectRatio: false,
            scales: {
              yAxes: [{
                ticks: {
                  callback: function(value, index, values) {
                    console.log(value)
                    return functions.moneyFormat(value);
                  },
                },
              }],
            },
          });
        }
      },
    },
    mounted() {
      this.render();
    },
  });
</script>

Environment

• vue.js version: 2.2.1
• vue-chart.js version: 2.6.3
• npm version: 3.10.3

[apertureless]

Can you please post a jsfiddle or codepen for reproduction?

It is working fine more me:
https://codepen.io/apertureless/pen/BZKBdX?editors=1010

[joe642]

Thanks for getting back so quickly! I passed the options in as a prop as you did in your pen, rather than having it on the child component (like in my code above). It now works as expected.

[apertureless]

Oh yeah, thats because you passed the options directly to the renderChart method.
Which does not work with the reactivePropMixin.

Because the reactiveProp mixin checks for updates and then call either update() or this.renderChart(chartData, options)

So it required a prop or data model named options.