Hook functions defined by mixin not called for third-party plugin component

Question

I'm using Vue with the Vuetify plugin.

I'm extending Vue components globally with a mixin:

Vue.mixin({
    mounted() {
        console.log('Component mounted');
    }
});

I see the log above for all of my own components but not for the v-container component of Vuetify.

Strange thing is, when I inspect the options of this component like so:

Vue.options.components['v-container'].options.mounted

I see that the mounted function defined by my mixin is added to the array of hooks.

After creating a fiddle I was able to see it did work for all other Vuetify components.

From the docs:

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

Am I missing something?

Answer 1

The problem is specific to a component in use, v-container. It is functional component and functional components cannot have lifecycle methods, so ones defined in a mixin will be ignored.

As the documentation describes functional components,

It doesn’t manage any state, watch any state passed to it, and it has no lifecycle methods. Really, it’s only a function with some props.