[Vuejs]-How to hanlde async data with vue-echarts?

Figured it out.

I needed to add a watch on the props that first clears the array and then adds the new value back into the array.

import { computed, ref, watch } from 'vue';

const props = defineProps({
  totalScore: {
    type: Number,
    required: true,
  },
  reportDate: {
    type: String,
    required: true,
  },
});

const gaugeDataRef = ref<number[]>([]);

watch(props, () => {
  gaugeDataRef.value.slice(0, 1);
  gaugeDataRef.value.push(props.totalScore);
});

const gaugeOption = ref({
  series: [
    {
      emphasis: {
        disabled: true,
      },
      data: gaugeDataRef.value,
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 3,
      radius: '95%',
      center: ['50%', '95%'],
      pointer: {
        icon: 'circle',
        length: '12%',
        width: 50,
        offsetCenter: [0, '-90%'],
        itemStyle: {
          color: '#FFFFFF',
          borderColor: scoreHexColor,
          borderWidth: 5,
          shadowColor: 'rgba(10, 31, 68, 0.5)',
          shadowBlur: 2,
          shadowOffsetY: 0.1,
        },
      },
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          width: 10,
          color: [
            [0.48, '#ee6352'],
            [0.52],
            [0.66, '#ff8b3b'],
            [0.7],
            [0.83, '#fac05e'],
            [0.87],
            [1, '#59cd90'],
          ],
        },
      },
      axisTick: {
        length: 2,
        lineStyle: {
          color: '#8a94a6',
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        rich: {
          header: {
            fontSize: 36,
            fontWeight: 700,
            fontFamily: 'Open Sans',
            color: '#0a1f44',
          },
          subHeader: {
            fontSize: 16,
            fontWeight: 400,
            fontFamily: 'Open Sans',
            color: '#8a94a6',
          },
        },
        formatter: (value: number) => {
          return `{header|${value}}\n{subHeader|${props.reportDate}}`;
        },
        offsetCenter: [0, '-20%'],
        valueAnimation: true,
      },
    },
  ],
});

import { computed, ref, watch } from 'vue';

const props = defineProps({
  totalScore: {
    type: Number,
    required: true,
  },
  reportDate: {
    type: String,
    required: true,
  },
});

const gaugeDataRef = ref<number[]>([]);

watch(props, () => {
  gaugeDataRef.value.slice(0, 1);
  gaugeDataRef.value.push(props.totalScore);
});

const gaugeOption = ref({
  series: [
    {
      emphasis: {
        disabled: true,
      },
      data: gaugeDataRef.value,
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      splitNumber: 3,
      radius: '95%',
      center: ['50%', '95%'],
      pointer: {
        icon: 'circle',
        length: '12%',
        width: 50,
        offsetCenter: [0, '-90%'],
        itemStyle: {
          color: '#FFFFFF',
          borderColor: scoreHexColor,
          borderWidth: 5,
          shadowColor: 'rgba(10, 31, 68, 0.5)',
          shadowBlur: 2,
          shadowOffsetY: 0.1,
        },
      },
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          width: 10,
          color: [
            [0.48, '#ee6352'],
            [0.52],
            [0.66, '#ff8b3b'],
            [0.7],
            [0.83, '#fac05e'],
            [0.87],
            [1, '#59cd90'],
          ],
        },
      },
      axisTick: {
        length: 2,
        lineStyle: {
          color: '#8a94a6',
          width: 2,
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      detail: {
        rich: {
          header: {
            fontSize: 36,
            fontWeight: 700,
            fontFamily: 'Open Sans',
            color: '#0a1f44',
          },
          subHeader: {
            fontSize: 16,
            fontWeight: 400,
            fontFamily: 'Open Sans',
            color: '#8a94a6',
          },
        },
        formatter: (value: number) => {
          return `{header|${value}}\n{subHeader|${props.reportDate}}`;
        },
        offsetCenter: [0, '-20%'],
        valueAnimation: true,
      },
    },
  ],
});