The chart is not updating and when I reload the page it disappears

[leonardo-cordeiro]

<template>
  <div>
    <Line ref="chart" v-if="loaded" :options="options" :data="data" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Line } from 'vue-chartjs'
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js'
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend)

export default {
  name: 'GraficoComponente',
  components: { Line },
  computed: mapGetters(['todosLancamentos']),

  data: () => {
    return {
      loaded: false,
      data: {
        labels: [],
        datasets: [
          {
            label: 'Valor em caixa',
            backgroundColor: '#f87979',
            data: []
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },

  created() {
    // eslint-disable-next-line no-unused-vars
    this.$store.subscribe((mutation, state) => {
      if (mutation.type === 'calcularCaixa') {
        this.loaded = false
        this.renderizarGrafico()
        this.loaded = true
      }
    })
  },

  methods: {
    renderizarGrafico() {
      {
        let lancamentos = [...this.todosLancamentos]
        lancamentos.sort((a, b) => new Date(a.data) - new Date(b.data))
        let valorEmCaixa = 0
        let datas = []
        let valores = []

        lancamentos.forEach((lancamento) => {
          const dataFormatada = new Date(lancamento.data).toLocaleDateString('pt-BR', { timeZone: 'UTC' })
          datas.push(dataFormatada)
          valorEmCaixa += lancamento.valor
          valores.push(valorEmCaixa)
        })

        this.data.labels = datas
        this.data.datasets[0].data = valores
        if (this.$refs.chart && this.$refs.chart.chart) {
          this.$refs.chart.chart.update()
        }
      }
    }
  }
}
</script>

[arnonrdp]

I'm not sure how to solve it exactly, but as long as nobody comes up with the solution, this strategy will do the trick for now:

await new Promise((resolve) => setTimeout(resolve, 150))

Add this code snippet after calling the renderizarGrafico() function.
This will make the graph reload.