VueUiSparkbar component does not refresh when responsive data changes.

Environment :

vue: 3.5.3 
vue-data-ui :2.3.9

When I change the data in the dataset (by clicking the "Change Dataset" button), the chart does not update accordingly. Do I need to manually call any additional methods to refresh it? Here is my code：

 <script setup lang="ts">
import {ref} from "vue";
import {VueDataUi, type VueUiSparkbarConfig, type VueUiSparkbarDatasetItem} from "vue-data-ui";
import "vue-data-ui/style.css"

const config = ref<VueUiSparkbarConfig>();
const dataset = ref<VueUiSparkbarDatasetItem[]>([
  {
    "name": "KPI 1",
    "value": 96.66,
    "color": "#dd64d9",
    "prefix": "",
    "suffix": "%",
    "rounding": "1"
  },
  {
    "name": "KPI 2",
    "value": 64.44,
    "color": "#42d392",
    "prefix": "",
    "suffix": "%",
    "rounding": '1'
  },
  {
    "name": "KPI 3",
    "value": 32.22,
    "color": "#ff6400",
    "prefix": "",
    "suffix": "%",
    "rounding": '1'
  },
  {
    "name": "Name",
    "value": 10,
    "color": "#CCCCCC",
    "prefix": "",
    "suffix": "%"
  }
]);
const i = ref<number>(40);

function addData() {
  i.value = i.value + 1;
  dataset.value.push({
    name: "name-" + i.value,
    value: i.value,
    color: "rgba(255,0,0,0.76)",
    prefix: "",
    suffix: "%",
    rounding: '1'
  },)
}

</script>

<template>

  <button @click="addData" style="cursor: pointer;margin: 5px;padding:10px;">Change Dataset</button>

  <div style="display: flex;gap:10px; padding:10px;margin-top: 10px; background: #eeefef">
    <div style="width:500px;height: 400px ;">
      <VueDataUi component="VueUiSparkbar" :config="config" :dataset="dataset"/>
    </div>
    <div style="flex:1;">
      {{ dataset }}
    </div>
  </div>
</template>

graphieros / vue-data-ui

VueUiSparkbar component does not refresh when responsive data changes. #71