title: Making am4Charts reactive in vuejs
body: <p>I'm trying to build a component for <code>am4chart</code> in <code>vuejs</code> which I can re-utilise at different places, I've a some search options which changes the <code>chartData</code> values as per the search result. </p>
  
  <p>When my search page loads, it displays the chart perfectly but when I try to check filters it doesn't change or show as per the data. I have all the code related to <code>am4Chart</code> in <code>mounted</code> section, so I tried placing the same in my <code>methods</code> and tried calling the <code>method</code> in mounted section from there. I also put a <code>watch</code> function so that the function can be called again when the data changes. But when I place it in <code>methods</code> the whole <code>chart</code> vanishes, in-fact if I place the same code in <code>mounted</code> and <code>methods</code> section it doesn't display.</p>
  
  <p>I've checked via console my <code>method</code> is being called when <code>chartData</code> changes but don't know how can I make it reactive.</p>
  
  <p><code>VueJS</code> version <code>2.6.10</code></p>
  
  <p><code>am4Chart</code> version <code>4.4.10</code></p>
  
  <p>My code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div ref="amchart_semi_pie_chart"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import * as am4core from "@amcharts/amcharts4/core";
      import * as am4charts from "@amcharts/amcharts4/charts";
  
      export default {
          name: "amchart-semi-pie-chart",
          props: {
              chartData: Object,
          },
          data() {
              return {
                  chart: '',
              }
          },
          methods: {
              loadChart() {
                  console.log('Values are changed')
              }
          },
          mounted() {
              //Creating charts
              let chart = am4core.create(this.$refs.amchart_semi_pie_chart, am4charts.PieChart);
              chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
  
              chart.data = this.chartData.data;
  
              // Add and configure Series
  
              chart.radius = am4core.percent(70);
              chart.innerRadius = am4core.percent(40);
              chart.startAngle = 180;
              chart.endAngle = 360;
  
              let series = chart.series.push(new am4charts.PieSeries());
              series.dataFields.value = "value";
              series.dataFields.category = "label";
  
              series.slices.template.cornerRadius = 10;
              series.slices.template.innerCornerRadius = 7;
              series.slices.template.draggable = true;
              series.slices.template.inert = true;
              series.alignLabels = false;
  
              if(this.chartData.legends)
                  chart.legend = new am4charts.Legend();
  
              this.chart = chart;
  
          },
          watch: {
              chartData: {
                  handler: 'loadChart',
                  deep: true
              }
          },
          beforeDestroy() {
              if (this.chart) {
                  this.chart.dispose();
              }
          }
      }
  &lt;/script&gt;
  </code></pre>