Synchronize zoom level

[boseon-ai]

Hi, I am new to js, vue and vue-plotly.
Recently, I am working on a prj in that zoom levels of multiple graphs are needed to be synchronized with each other.

Fortunately, I can get the range info from the graph that zoom action has been made and try to share the range info with the following code.

reLayOut (eventdata) {
EventBus.$emit('resetaxis', eventdata)
},

but, it's not working at all.
mounted () {
EventBus.$on('resetaxis', this.reSetAxis)
},

reSetAxis (ed) {
var el = document.getElementById(this.tagName)
console.log(this.tagName)
el.layout.xaxis.range = [ed['xaxis.range[0]'], ed['xaxis.range[1]']] // this code doesn't work at all.
el.layout.yaxis.range = [ed['yaxis.range[0]'], ed['yaxis.range[1]']] // this code doesn't work at all.
},

the layout looks like this.
layout: {
title: this.tagName,
xaxis: { title: 'index' },
yaxis: { title: 'value' },
autosize: true
},

If you have any idea, please let me know what I am doing wrong.
Thanks in advance.