[Feature] Echarts resize not work in Vue3

[suncg-sgla]

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?

[xupapa]

same question

[luoyangweb]

same question

[linghaoSu]

Providing a stackblitz demo may be helpful to resolve this issue.

[luoyangweb]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[gehringf]

I had the same issue when layout out my charts via flexbox. I was able to get rid of the problem by switching to a grid instead.

.content {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(1,1fr);
  gap: 1rem;
}

[luoyangweb]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。