vue组件中的addEventListener触发不完整

Question

<template>
  <div id="app">
     <template v-for="(item, index) in list">
       <transform-tool :key="index" :x="item"></transform-tool>
     </template>
  </div>
</template>

<script>
import TransformTool from './components/tranform-tool/transform-tool.vue'

export default {
  name: 'app',
  data() {
    return {
      list: [1, 2]
    }     
  },
  components: {
    TransformTool
  }
}
</script>

<style>


</style>

这是父组件，下面的是子组件

<template>
  <div>{{xx}}</div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'TransformTool',
    props: {
      x: {
        type: Number,
        default: 0
      }
    },
    data() {
        return {
            xx: 0
        }
    },
    computed: {
        id() {
            return 'id' + this.x
        }
    },
    mounted() {
        let self = this
        document.onmousemove = function(e) {
          self.xx = e.pageX
        };
    },
    methods: {
      
    }
  }
</script>

<style>

</style>
我的问题是：当我鼠标在页面中移动时，第一个组件的xx永远没有变化，只有第二个在变

Answer 1

事件覆盖，只有最后一个生效，不想覆盖的话这样写

document.addEventListener("onmousemove",function(e){
    self.xx = e.pageX
})