How to not execute parent hook in child component in Vue?

Question

Vue.js

The created or mounted hook works on both the parent and the child component. How can I make sure that the parent hook is not executed in the child component?

const parent = new Vue({
mounted: () => console.log('handler'),
});
const child =  parent.extend({});

Answer 1

This is logical behavior. In the same way, when you inherit a class, you call the parent's constructor, and the parent's hooks work on the child.
Most likely you are doing something wrong and using inheritance for other purposes. Describe the task and we will help you to do it humanly. You can set up custom merge strategies
in Vue , but this is an advanced tool for exceptional cases. This is not something that should be used without thinking carefully.

Answer 2

Add your hook to an object in extend ?

const parent = new Vue({
mounted: () => console.log('handler'),
});
const child =  parent.extend({
  mounted: () => {}
});