title: Vuejs - Chartjs doesn't render my own options with api request
body: <p>I have a problem when I want to fill my chart with my api.
  My chart's extraOptions are set, but when I want to render my chart with it, it takes defaults options.</p>
  <p>Here is my component:</p>
  <pre><code>import { Bar, mixins } from 'vue-chartjs';
  
  export default {
    name: 'bar-chart',
    extends: Bar,
    mixins: [mixins.reactiveProp],
    props: {
      extraOptions: Object,
      chartData: Object,
  
    },
    data() {
      return {
        ctx: null
      };
    },
    methods: {
      
    },
    mounted() {
      this.renderChart(
        this.chartData,
        this.extraOptions
      );
      this.$watch('chartData', (newVal, oldVal) =&gt; {
        if (!oldVal) {
          console.log(this.extraOptions)
          this.renderChart(
            this.chartData,
            this.extraOptions
          );
        }
      }, { immediate: true });
    }
  };
  </code></pre>
  <p>And my overview with my Options and call api:</p>
  <pre><code>  &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-4&quot;&gt;
            &lt;card&gt;
            &lt;bar-chart :height=&quot;heightChart&quot; :extraOptions=&quot;optionsBar&quot; :chart-data=&quot;BarData&quot;&gt; &lt;/bar-chart &gt;
            &lt;/card&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    import Loading from 'src/components/Dashboard/Layout/LoadingMainPanel.vue'
    import LineChart from 'src/components/UIComponents/Charts/LineChart.vue'
    import pieca from 'src/components/UIComponents/Charts/pieca.vue'
    import Clock from './Clock.vue'
    import BarChart from 'src/components/UIComponents/Charts/BarChart'
    import axios from 'axios'
  
  
    const WorldMap = () =&gt; ({
      component: import('./../Maps/WorldMap.vue'),
      loading: Loading,
      delay: 200
    })
  
    export default {
      components: {
        LineChart,
        pieca,
        Clock,
        BarChart
      },
      /**
       * Chart data used to render stats, charts. Should be replaced with server data
       */
      data () {
        return {
          optionsLine: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
              display: true,
              text: 'CA Mensuel/12 mois',
              fontSize: 17,
              fontFamily: &quot;'Montserrat', 'Helvetica Neue', Arial, sans-serif&quot;,
              fontStyle: 'normal',
              fontColor: 'black',
            }
          },
          optionsBar: {
            maintainAspectRatio: false,
            legend: {
              display: false,
              labels: {
                fontColor: '#ced4da'
              }
            },
            title: {
              display: true,
              text: 'Cmd/Transporteur',
              fontSize: 17,
              fontFamily: &quot;'Montserrat', 'Helvetica Neue', Arial, sans-serif&quot;,
              fontStyle: 'normal',
              fontColor: 'black',
            },
            responsive: true,
            tooltips: {
              backgroundColor: '#f5f5f5',
              titleFontColor: '#333',
              bodyFontColor: '#666',
              bodySpacing: 4,
              xPadding: 12,
              mode: &quot;nearest&quot;,
              intersect: 0,
              position: &quot;nearest&quot;
            },
            legend: {
              display:true,
              position: 'bottom'
            },
            scales: {
              yAxes: [{
          
                stacked: true,
                gridLines: {
                  drawBorder: false,
                  color: 'rgba(29,140,248,0.1)',
                  zeroLineColor: &quot;transparent&quot;,
                },
                ticks: {
                  suggestedMin: 60,
                  suggestedMax: 120,
                  padding: 20,
                  fontFamily: &quot;'Poppins',sans-serif&quot;,
                  fontColor: &quot;#ced4da&quot;
                }
              }],
              xAxes: [{
          
                stacked: true,
                gridLines: {
                  drawBorder: false,
                  color: 'rgba(29,140,248,0.1)',
                  zeroLineColor: &quot;transparent&quot;,
                },
                ticks: {
                  padding: 20,
                  fontFamily: &quot;'Poppins',sans-serif&quot;,
                  fontColor: &quot;#ced4da&quot;
                }
              }]
            }
          },
  
          heightChart: 255,
  
          BarData: {
  
          },
  </code></pre>
  <p>And my api request:</p>
  <pre><code>      axios
          .get('api_url')
          .then(response =&gt; (globalthis.BarData = response.data.transporteur_jour
          ))
  </code></pre>
  <p>I think my chart is rendering with my extraOptions and when it's fill with api data, it takes the defaults options. When I don't call my api and fill the labels directly in my overview, it works.
  How can I do to keep my extraOptions ?</p>
  <p>Thanks</p>