[Bug] 动态获取数据渲染词图显示有问题

Version

2.0.9

Link to Minimal Reproduction

动态获取数据渲染词图显示有问题

Steps to Reproduce

<template>
  <n-card
    :segmented="{ content: true }"
    :header-style="{ padding: 0 }"
    header-class="bg-gradient-to-b from-[#e8f4ff80] to-[#fff0]"
  >
    <template #header>
      <div class="px-20 py-15 text-md font-bold">热门词条</div>
    </template>
    <div ref="chartRef" class="w-full min-h-600"></div>
  </n-card>
</template>
<script lang="ts" setup>
import { VChart, type ISpec } from '@visactor/vchart';
const spec = {
  type: 'wordCloud',
  data: {
    id: 'wordCloud',
    name: 'baseData',
    values: [],
  },
  nameField: 'challenge_name',
  valueField: 'sum_count',
  seriesField: 'challenge_name',
  word: {
    formatMethod: (datum) => {
      return `${datum.challenge_name}...`;
    },
  },
} as ISpec;

const chartRef = ref<HTMLDivElement>();
const chartInstance = ref<VChart>();
const getData = () => {
  return fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/data-wordcloud.json').then(
    (response) => {
      return response.json();
    },
  );
};

onMounted(async () => {
  const el = chartRef.value;
  if (!el) return;
  chartInstance.value = new VChart(spec, { dom: el });
  chartInstance.value.renderAsync();
  setTimeout(async () => {
    const data: any[] = await getData();
    chartInstance.value?.updateData('wordCloud', data.slice(0, 30));
  }, 1000);
});
onBeforeUnmount(() => {
  chartInstance.value?.release();
});
</script>

渲染效果为:

是我写的有问题吗?

Current Behavior

Expected Behavior

希望能正常显示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response