Trigger the page inside the iFrame to auto-scroll the calling page

inside-page.vue

<template>
<div>
<h1>Hello</h1>
<div @click="trigger = 'change' " style="color:white;background-color:blue;">
button
</div>
</div>
</template>
<script>
export default {
   data(){
     return {
       trigger: null,
    }
  },
   watch : {
   trigger: function(){
     window.parent.postMessage({
        message: 'scroll',
      }, "*");
    }
  }
}
</script>

parent.vue

<template>
<div>
<iframe
ref="target"
src="inside-page-url"
/>
</div>
</template>
<script>
export defarult {
  mounted(){
    window.addEventListener("message", (response) => {
      if(response.message == 'scroll'){
         window.scrollTo({
            top: this.$refs.target.offsetTop,
            behavior: "smooth",
        });
      }
   }) 
  }
}
</script>