title: How to create a dynamic graph.js with vuejs and quasar getting from axios
body: <p>I am trying to make a component using graph.js and get  data  from axios my Component is CashFlow.vue:</p>
  <pre><code>&lt;template&gt;
    &lt;q-card class=&quot;bg-white full-width&quot;&gt;
      &lt;q-card-section class=&quot;bg-primary&quot;&gt;
        &lt;div class=&quot;row items-center no-wrap&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
            &lt;div class=&quot;text-h6 text-white text-center&quot;&gt;{{title}}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/q-card-section&gt;
      &lt;q-card-section&gt;
        &lt;canvas id=&quot;cash-flow-graph&quot;&gt;&lt;/canvas&gt;
      &lt;/q-card-section&gt;
    &lt;/q-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Chart from 'chart.js'
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Object,
        default: null
  
      },
      options: {
        type: Object,
        default: null
      }
    },
    data () {
      return {
      }
    },
    mounted () {
      this.createChart('cash-flow-graph')
    },
    methods: {
      createChart (chartId) {
        const ctx = document.getElementById(chartId)
        const myChart = new Chart(ctx, {
          type: 'line',
          data: { ...this.data },
          options: { ...this.options }
        })
        return { ...myChart }
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  <p>So I draw this component in the Main Component:</p>
  <pre><code>import CashFlow from 'src/components/charts/CashFlow'
  
  &lt;cash-flow  :data=&quot;cashFlow&quot; :options=&quot;optionsLine&quot; title=&quot;This is the title&quot; v-if =&quot;loadCash&quot; :key=&quot;cashKey&quot;&gt;&lt;/cash-flow&gt;
  </code></pre>
  <p>and y try call the data and fill in the mounted of the main component:</p>
  <pre><code>async loadCashFlow () {
        await this.fetchCashFlowData(formatYMD(javaScriptDateToString(this.initDate)))
        this.cashFlow = { ...this.dashboardCrud.getStore('getCashFlow') }
        this.cashKey++
        this.loadCash = true
      }
  </code></pre>
  <p>I am getting the data and the graph is working but I have this error:</p>
  <pre><code>&gt; RangeError: Maximum call stack size exceeded
  &gt;     at Function.keys (&lt;anonymous&gt;)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2130)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2128)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  &gt;     at _traverse (vue.runtime.esm.js?5593:2132)
  </code></pre>