Vue beforeDestroy example

Example.vue

<template>
    <div class="container">
       <div>
           <button @click="toggleMouse">Toggle Mouse</button>
       </div>
       <Mouse v-if="isMouseVisible" />
    </div>
</template>

<script>
    import Mouse from './Mouse'
    export default {
        components: {
            Mouse
        },
        data() {
            return {
                isMouseVisible: true
            }
        },
        methods: {
            toggleMouse () {
                this.isMouseVisible = !this.isMouseVisible
            }
        }
    }
</script>

Mouse.vue

<template>
  <div class='container'>Mouse component</div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("mousemove", this.printMousePosition);
  },
  methods: {
    printMousePosition(e) {
      console.log(`Current position (x, y): (${e.pageX}, ${e.pageY})`);
    }
  },
  beforeDestroy() {
    console.log('before destroy', this.message);
    window.removeEventListener('mousemove', this.printMousePosition);
  },
  destroyed() {
    console.log('destroy');
  }
};
</script>

Tuyệt...!!