Set Data on button click to update existing chart - not working

[ninelhodzic]

Version

Latest

Test Environment

Chrome, Ubuntu 18

Current Behavior

I'm using Vue to work with the TUI charts.
Vue library I've used: https://github.com/nhnent/toast-ui.vue-chart

Example code created:

https://codesandbox.io/s/ywn5074ymv?fontsize=14

<template>
  <div class="hello">
   
    <button @click="onClick">Change data</button>
    <bar-chart :data="chartData" />
  </div>
</template>

<script>
import "tui-chart/dist/tui-chart.css";
import { barChart, lineChart } from "@toast-ui/vue-chart";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    onClick: function() {
      this.chartData = {
        // for 'data' prop of 'bar-chart'
        categories: ["July", "Aug"],
        series: [
          {
            name: "Budget",
            data: [1234, 4555]
          },
          {
            name: "Income",
            data: [5252, 8998]
          }
        ]
      };
    }
  },
  components: {
    "bar-chart": barChart
  },
  data() {
    return {
      chartData: {
        // for 'data' prop of 'bar-chart'
        categories: ["July", "Aug", "Sep", "Oct", "Nov"],
        series: [
          {
            name: "Budget",
            data: [3000, 5000, 7000, 6000, 4000]
          },
          {
            name: "Income",
            data: [1000, 7000, 2000, 5000, 3000]
          }
        ]
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Problem Description

Simple BarChart with data set on create.
If I click on button "Change Data" to update data, there is an error in Browser console log

proxyConsole.js:72 [Vue warn]: Error in callback for watcher "data": "TypeError: this.componentMap.mouseEventDetector.presetBeforeRerender is not a function"

found in

---> <BarChart>
       <HelloWorld> at /src/components/HelloWorld.vue
         <App> at /src/App.vue
           <Root>
function.console.(anonymous function) @ proxyConsole.js:72
proxyConsole.js:72 TypeError: this.componentMap.mouseEventDetector.presetBeforeRerender is not a function
    at ComponentManager.presetBeforeRerender (tui-chart.js:17015)
    at BarChart.setData (tui-chart.js:16158)
    at VueComponent.handler (toastui-vue-chart.js:1)
    at Watcher.run (vue.common.dev.js:4540)
    at flushSchedulerQueue (vue.common.dev.js:4284)
    at Array.eval (vue.common.dev.js:1985)
    at flushCallbacks (vue.common.dev.js:1911)

The question is:

• Is this a bug?
• How to set data after chart is created?

[jung-han]

@ninelhodzic Thanks for issue. It's Bug. I'll fix it asap. 😬