Read only issue with chart js

[shankhadevpadam]

<script setup>
import { ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import { Line } from 'vue-chartjs'
import Api from '../Api/api'
import DatePicker from 'vue-datepicker-next'
import 'vue-datepicker-next/index.css'

import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js'

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
)

const props = defineProps({
    userId: {
        type: Number,
        required: true,
    },
})

const filter = ref('last-7-days')

const dateRange = ref(null)

const chartQuery = useQuery({
    queryKey: ['chart-data', filter],
    queryFn: async () => {
        const response = await Api.get(
            `/affiliate/stats/user/${props.userId}?filter=${filter.value}`
        )

        return response.data
    },
})

const setFilter = (param) => {
    filter.value = param
}
</script>

<template>
    <div class="row">
        <div class="col-md-8 col-sm-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title">Total Revenue</h3>
                    </div>

                    <div class="d-flex justify-content-between">
                        <strong
                            class="total-revenue"
                            v-text="chartQuery.isLoading.value ? 0 : chartQuery.data.value.total"
                        ></strong>

                        <div class="filter">
                            <div class="dropdown d-inline mr-2">
                                <button
                                    class="btn btn-secondary dropdown-toggle"
                                    type="button"
                                    data-toggle="dropdown"
                                    aria-expanded="false"
                                >
                                    {{
                                        filter
                                            .split('-')
                                            .join(' ')
                                            .toUpperCase()
                                    }}
                                </button>
                                <div class="dropdown-menu">
                                    <a
                                        class="dropdown-item"
                                        href="javascript:;"
                                        @click="setFilter('last-7-days')"
                                        >Last 7 Days</a
                                    >
                                    <a
                                        class="dropdown-item"
                                        href="javascript:;"
                                        @click="setFilter('last-month')"
                                        >Last Month</a
                                    >
                                    <a
                                        class="dropdown-item"
                                        href="javascript:;"
                                        @click="setFilter('this-year')"
                                        >This Year</a
                                    >
                                </div>
                            </div>
                            <date-picker
                                v-model:value="dateRange"
                                @confirm="onConfirm"
                                value-type="format"
                                format="YYYY-MM-DD"
                                :confirm="true"
                                range
                                placeholder="Select date range"
                            ></date-picker>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <span v-if="chartQuery.isLoading.value">Loading...</span>
                    <span v-else-if="chartQuery.isError.value">Error: {{ chartQuery.error.value }}</span>
                    <Line v-else :data="chartQuery.data.value.chart_data" />
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                        <h3 class="card-title">Refunds</h3>
                    </div>

                    <div class="d-flex justify-content-between">
                        <strong class="total-revenue">$15342</strong>
                    </div>
                </div>
                <div class="card-body"></div>
            </div>
        </div>
    </div>
</template>

<style>
.total-revenue {
    font-size: 25px;
}

.mx-input {
    height: 37px !important;
}
</style>

This is my chart js component. But issue is when i choose the dropdown option first time i got

[Vue warn] Delete operation on key "0" failed: target is readonly.
[Vue warn] Set operation on key "length" failed: target is readonly.

[wjlee2020]

@shankhadevpadam I think it isn't a vuejs issue, but vue chart issue.
I had the same warnings and I worked around it by passing a copy of the reactive chartData to the chart I was using, likeso:

<Line
  id="my-chart-id"
  :options="lineOptions"
  :data="JSON.parse(JSON.stringify(chartData))"
/>