关于vue单页面多个组件嵌套监听浏览器窗口变化问题

需求

最近公司有个大屏展示项目（如下图）
页面的元素需要做响应式监听，图表需要跟着窗口响应变化

问题

每一个图表都被我写成了一个组件，然后就在每一个组件里写了一串代码，监听浏览器变化
结果只有父组件的代码生效

mounted(){
   window.onresize = () => {  //当窗口发生改变时触发
	//
   };
}

原因

经简单测试后发现，同一个路由页面只能注册一次浏览器窗口监听事件，第二次注册的会覆盖第一次注册
下边代码即可测试

mounted(){
   window.onresize = () => {  //当窗口发生改变时触发 
	console.log(1)
   };
   window.onresize = () => {  //当窗口发生改变时触发 （会覆盖上一个函数）
	console.log(2)
   };
}

父子嵌套组件同理，子组件生命周期执行在父组件之前，父组件函数会覆盖子组件函数

解决方案

1、只在父页面写个监听，但是通过组件传值的方式传给子组件，并且子组件用watch监听传值的变化，响应改变
2、假如是多层组件嵌套，用vuex可能会更省力