Data doesn't update [Vue 3]

[DrakoPOD]

I update the data every second, but the chart doesn't refresh .

[skalinichev]

It's difficult to say what went wrong without any information about the issue. But it does work for me, see the uplot-vue3-example.tsx example. Launch it via "yarn run serveVue3". Even when you move the data to the data function and remove $forceUpdate it still continues to work.
Please, check whether you're doing everything right and provide more info if it still doesn't work for you.

[DrakoPOD]

@skalinichev
here my code, uplot component is declared globally.

<template>
  <q-page>
      <q-no-ssr>
        <UplotVue
          :data="udata"
          :options="opts"
        />
      </q-no-ssr>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, reactive} from 'vue';
import { socket } from 'boot/socket'
import 'uplot/dist/uPlot.min.css';

export default defineComponent({
  name: 'PageIndex',
  components: {  },
  setup() {
    const udata = reactive<Array<Array<number>>>(
      [[Date.now()-3,Date.now()-2,Date.now()-1,Date.now()],[1,3,4]]
    )

    socket.on('name/hola', (msg: {data: Array<number>}) => {
      udata[0].push(msg.data[0])
      udata[1].push(msg.data[1])
    })

    let opts = {
      title: 'My Chart',
      id: 'chart1',
      class: 'my-chart',
      width: 300,
      height: 200,
      series: [
        {},
        {
          // initial toggled state (optional)
          show: true,

          spanGaps: false,

          // in-legend display
          label: 'RAM',
          value: (self: unknown, rawValue: number) => '$' + rawValue.toFixed(2),

          // series style
          stroke: 'red',
          width: 1,
          fill: 'rgba(255, 0, 0, 0.3)',
          dash: [10, 5],
        }
      ],
    };

    return { udata, opts }
});
</script>

[skalinichev]

Oh, I see. Mutating object/array properties is not supported due to Vue limitation, see also - vuejs/vue#2164 You have to create the new object/array property for the library to detect the changes, see how it's done in the uplot-vue3-example.tsx example.

So it's a won't fix I'm afraid, at least not until Vue fixes the watching API or someone comes up with a solution how to track object mutation changes.
Maybe it's worth adding a limitation section to the Readme, will probably do that later.

[flo-ride]

Hi, sorry to reopen this issue,

I'm quite new regarding Vue 3 and this library but i don't understand why not using the deep: true parameter of watch doesn't solve the mutability detection problem of data array (and also options if you want to go farther).

(I'm currently trying to create a new telemetry UI working in realtime but i face some GC problem link to the continuous use of slice or copy and i think maybe allowing mutability might solve it.)

[skalinichev]

Well this library relies on the fact that previous and current values in watcher will be different. Currently that's not the case - https://vuejs.org/api/reactivity-core.html#watch. quotation: "Note in deep mode, the new value and the old will be the same object if the callback was triggered by a deep mutation". But if one doesn't use the deep mode the changes will not be detected at all, since props are objects.
Therefore we have to pass over new instances of data/options to make it all work.

Having said that I'm not a Vue expert. If you know a way to make it work w/o affecting performance drastically, patches and even suggestions are more then welcomed!