[Feature] Echarts resize not work in Vue3

### 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:
```

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();
});
});

.chart {
flex: 1;
height: 500px;
text-align: center;
border: 1px solid #aaa;
margin: 0 10px;
}

```
And the parent component is like this:
```

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";

.content {
flex: 1;
display: flex;

.chart-wrapper {
flex: 1;
}
}

```

### What does the proposed API look like?

Is there any feature to solve the problem?