vue-chartjs在chartOption中发生更改时不呈现

我正在使用composition API在vuejs中构建图表，chartjs@4.2和vue-chartjs@5.2.0

然而，我无法保持选项和数据的反应性，所以我构建了一个按钮，当激活时，缩放将处于活动状态，而当不活动时，缩放会被重置。但我没有设法将这种反应性保持在组件内<；条形图>；。更专业的是，我会让grafico条在其他视觉效果中充当过滤器（就像Power BI一样）。有人能帮我吗？

我有一个包含操作码和数据集的js文件：

export const optionBar = {
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
      datalabels: {
        formatter: function(values) {
          return new Intl.NumberFormat('pt-br',{ maximumFractionDigits: 2, minimumFractionDigits:2, }).format(values)
      }
    },
    zoom: { 
      zoom: {
      wheel: {
        enabled: true,
      },
      drag: {
        enabled: true,
        backgroundColor: 'rgba(12, 173, 241, 0.10)'
      },
      pinch: {
        enabled: true
      },
      mode: 'x'
    }
  }
  }
}

export const dataSet = {
  labels: [1,2,3,4],
  datasets: [
    {
      label: `test`,
      data: null,
     },
    ],
  }

我可以在控制台日志和模板中使用｛｛｝｝看到chartOption的更改，但我的图表不会相应更新。根据我在文档中看到的，根据更新的版本（2022-23），prop:options将通过在vue-chartjs中包含手表来“赞扬”选项中的任何更改：

<template>
//Toggle Button that change the boolean value and active changes in chartOption
   <button @click="ZoomAtivo" > {{zoomEnable}} </button> {{chartOptions.plugins  }}
              <div class="card "> 
                <div class="card-body">
                  <div class="card-header border-0 d-flex justify-content-between">
                    <h4 class="card-title mb-0">
                      Serie Temporal
                    </h4>
                    <div class="d-flex p-2">
                  <div                   
                    v-for="value in dateF" :key="value.id" 
                    class="btn-group btn p-0 mx-1" role="group" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="btnradio" :id="value.id_date_mode" :checked="value.check" />
                    <label class="btn btn-primary mb-0" :for="value.id_date_mode">
                     
                      {{value.date_mode}}</label> 
                  </div>
                  <p v-if="dateF == 1"> teste</p>
                </div> 
                  </div>
                 
                  <Bar v-if="load" class="STChart" :data="datasets" :options="chartOptions" 
:updateMode="'none'" />

            </div> 
          </div>
        
</template>


<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
import zoomPlugin from 'chartjs-plugin-zoom';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import moment from 'moment'
import { ref, reactive} from 'vue'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, zoomPlugin, ChartDataLabels)

import {optionBar,dataSet} from './options.js'
import { dateFilter } from '@/components/date-mode';

export default {
  components: { Bar } ,
  setup() {
    console.log(Bar)
    const chart = ref()
    const zoomEnable = ref(false)
    const data = ref([])
    const dateF = reactive(dateFilter)
    const chartOptions =reactive(optionBar)
    const load = ref(false)
    const data_mov = ref()
    const sobra_perda = ref()
    const datasets = reactive(dataSet)
    const label = ref()
   
    datasets.labels = data_mov
    datasets.datasets[0].data = sobra_perda
    datasets.datasets[0].label = `Sobra_Perda`
    const zmm = reactive({ 
      zoom: {
      wheel: {
        enabled: true,
      },
      drag: {
        enabled: true,
        backgroundColor: 'rgba(12, 173, 241, 0.10)'
      },
      pinch: {
        enabled: true
      },
      mode: 'x'
    }
  })
    const ZoomAtivo = () => {
      zoomEnable.value = !zoomEnable.value
      if(zoomEnable.value) {
       
        chartOptions.plugins.zoom = zmm
        console.log(chartOptions.plugins.zoom)
      } else {
        chartOptions.plugins.zoom=null
        console.log(chartOptions.plugins.zoom)
      }
    }

 async function DateChart(starDate, endDate, p_items) {
          starDate = `01-01-2020`
          endDate = `31-12-2022`

          const url = `http://localhost:1800/dash/Date/${starDate}/${endDate}`
          const respons = await fetch(url, {
            method: 'POST',
            body: JSON.stringify({
              empresa: JSON.parse(localStorage.getItem('companiesGlobalFilter')),
              items: p_items
            }),
            headers: {
              'Content-type': 'application/json; charset=UTF-8'
            },
          });
          data.value = await respons.json()
         
          const title = Object.keys(data.value[0])
          const _Sobra =data.value.map(v => v.sobra_perda)
    
          const _date_movimento =data.value.map(x => {
            let datee = new Date(x.date_movimento)
          const data = moment(datee).utc()
                        datee = data.format('MM/YYYY')
              return datee
          })
          data_mov.value = _date_movimento
          sobra_perda.value = _Sobra
          load.value = true
          label.value = title
              return data_mov
    }
    
    return {
      chartOptions,
      datasets,
      load, data_mov, 
      sobra_perda,dateF,
      zoomEnable, chart, ZoomAtivo
    }
  }
}
</script>
<style scoped>
  @import './css/chartjs.css';
</style>