What problem does this feature solve?

I defined a component in Vue3 which contains Echarts, when I use the component in a parent compent for only one time, the resize function did work, but when it comes to more than 2, the resize function broken unless the page is refreshed.
The component of Echarts is below:

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

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

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

onMounted(() => {
  const chart = echarts.init(chartEl.value);
  chart.setOption(options, true);
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>

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

And the parent component is like this:

<template>
  <div class="content">
    <SideBar></SideBar>
    <div class="chart-wrapper">
      <chart chartID="future" :options="FutureOptions" />
      <chart chartID="cot" :options="COTOptions" />
      <chart chartID="scatter" :options="scatterOptions" />
    </div>
  </div>
</template>

<script setup>
import SideBar from "../components/SideBar.vue";
import Chart from "../components/Chart.vue";
import FutureOptions from "../assets/options/FuturesOptions";
import COTOptions from "../assets/options/COTOptions";
import scatterOptions from "../assets/options/scatterOptions";
</script>

<style scoped lang="less">
.content {
  flex: 1;
  display: flex;

  .chart-wrapper {
    flex: 1;
  }
}
</style>

What does the proposed API look like?

Is there any feature to solve the problem?