Data doesn't want to re-render

[LavaYasha]

Hi! I'm use vue-chart-3 to render charts

my chart component:

<template>
  <LineChart ref="lineChartRef"
             v-bind="lineChartProps"
             :style="{
               'min-height': 0,
               height: '100%'
             }" />
</template>

<script>
/*eslint-disable*/
import {uuidv4} from '@/helpers/uuid4'
import { Chart, registerables } from 'chart.js';
import {useLineChart, LineChart} from "vue-chart-3";
import {computed, onBeforeUpdate, onUpdated, ref, toRef, watch} from 'vue';
import {ru} from 'date-fns/locale';
import 'chartjs-adapter-date-fns';
import zoomPlugin from 'chartjs-plugin-zoom';
import {useStore} from "vuex";

Chart.register(...registerables);
Chart.register(zoomPlugin);

export default {
  components: {
    LineChart
  },
  props: {
    data: Array
  },
  setup(props, context) {
    const data = toRef(props, 'data')

    const dataSets = computed(() => ({
        datasets: data.value
    }))

    const store = useStore()

    const theme = computed(() => store.state.theme.current)

    const options = computed(() => ({
      responsive: true,
      maintainAspectRatio: false,
      // animation,
      interaction: {
        intersect: false,
        axis: 'xy',
        mode: 'nearest',
      },
      scales: {
        x: {
          stacked: true,
          adapters: {
            date: {
              locale: ru
            }
          },
          position: 'bottom',
          type: 'time',
          ticks: {
            autoSkip: true,
            autoSkipPadding: 50,
            maxRotation: 0
          },
          time: {
            displayFormats: {
              hour: 'HH:mm',
              minute: 'HH:mm',
              second: 'HH:mm:ss'
            }
          },
          grid: {
            borderColor: () => {
              return theme.value === 'light' ? 'rgba(38, 38, 38, .08)' : 'rgba(255, 255, 255, .08)'
            },
            color: () => {
              return theme.value === 'light' ? 'rgba(38, 38, 38, .08)' : 'rgba(255, 255, 255, .08)'
            }
          }
        },
        y: {
          stacked: true,
          beginAtZero: true,
          grid: {
            borderColor: () => {
              return theme.value === 'light' ? 'rgba(38, 38, 38, .08)' : 'rgba(255, 255, 255, .08)'
            },
            color: () => {
              return theme.value === 'light' ? 'rgba(38, 38, 38, .08)' : 'rgba(255, 255, 255, .08)'
            }
          }
        },
      },
      plugins: {
        zoom: {
          pan: {
            enabled: true,
            mode: 'x',
          },
          zoom: {
            wheel: {
              enabled: true,
              speed: 0.05
            },
            drag: {
              enabled: true,
              modifierKey: 'meta'
            },
            pinch: {
              enabled: true,
            },

            mode: 'x',
          },
        },
      }
    }))


    const { lineChartRef, lineChartProps } = useLineChart({
        chartData: dataSets,
        options: options.value,
    })

    watch([theme, dataSets], () => {
      lineChartRef.value.update()
      // lineChartRef.value.renderChart()
      console.log(1)
    })

    return {
      options,
      dataSets,

      lineChartRef,
      lineChartProps,
    }
  }


}
</script>

in props 'data' i get datasets from parent component (get from API)

component get this data, but doesn't rendering

I set watchers onUpdated hook and use update() function on chart ref, but thats doesn't work too.
chart not render

Only way to see chart -> hot-reload on chart component

[victorgarciaesgi]

I think you pass the wrong shape of options and data. Read the docs again

[LavaYasha]

I checked still a few times. and realized that the error is in the reactivity of datasets. for some reason, the reactive dataset is not re-rendering the graph. only if I hard-code an array of datasets as indicated in the documentation, and make reactive data in the "data" field, then the graph will be correctly built