vue chartjs not rendering when have a change in chartOption - vue.js

Question

I'm building a chart in vuejs using composition API, chartjs#4.2, and vue-chartjs#5.2.0
however, I'm not managing to keep the options and data reactive, so I built a button that when active the zoom would be active, and when inactive it would be reset. But I'm not managing to keep this reactivity within the component<Bar>. In future I would make the grafico bars work as a filter in other visuals (just like Power BI). Could someone help me?
I have a js file that contains the opcoes and the dataset :
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,
},
],
}
I can see the chartOption change in the console log and template with {{ }} but my chart does not update accordingly. From what I saw in the document, according to the updated vers/ion (2022-23) the prop :options would be 'commending' any changes in options by containing the watch in 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>