What problem does this feature solve?

The option of a stock chart changed but the chart can not update accordingly but show like this:

After refreshing the webpage the chart shows correctly like this:

The chart.vue code is:

<template>
  <div ref="chartEl" class="chart" :id="chartID"></div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";

const chartEl = ref();
const { chartID, options } = defineProps({
  chartID: {
    type: String,
    default: "chart",
  },
  options: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

function chartInit() {
  const chart = echarts.init(chartEl.value);
  chart.setOption(options, true);
  window.addEventListener("resize", () => {
    chart.resize();
  });
}

onMounted(() => {
  chartInit();
});

watch(
  options,
  (newVal, preVal) => {
    console.log(newVal);
    chartInit();
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped>
.chart {
  flex: 1;
  height: 500px;
  text-align: center;
  border: 1px solid #aaa;
  margin: 0 10px;
}
</style>

What does the proposed API look like?

How can let the chart automatically update correctly?