Options aren't update (Vue3)

[DrakoPOD]

I have this options.

const options = reactive({
      chart: {
        id: 'vue-chart'
      },
      xaxis: {
        type: 'datetime',
        min: new Date().getTime() - 60000,
        max: new Date().getTime()
      }
})

I'm updating on a watch function. Chart need to show the last 60 seconds, is a real time chart line showing data from a temperature sensor. But the chart is fixed with the default min/max value, the value when I created options. The chart is update every 10 seconds.

 watch(
      () => devices.testDevice1.data.temp,
      () => {
        //[...code...]
        options.xaxis.min = new Date().getTime() - 60000
        options.xaxis.max = new Date().getTime()
        //[...code...]
      }
    )

[gmoigneu]

Bumped into that one as well. I'll take a look.

[gmoigneu]

I got around it by using the updateOptions method and forcing a refresh:

this.chartOptions.xaxis = {type: "datetime", min: this.start, max: this.end}
this.$refs.chart.updateOptions(this.chartOptions)
this.$refs.chart.refresh()