Lifecycle hooks: onMounted and synchronous registration

Each Vue component instance goes through a series of initialization steps when created — setting up data observation, compiling the template, mounting the instance to the DOM, and updating the DOM when data changes — and along the way runs functions called lifecycle hooks that let you add your own code at specific stages. The mounted hook, registered as onMounted() in <script setup>, runs after the component has finished the initial rendering and created the DOM nodes; the most commonly used hooks are onMounted, onUpdated, and onUnmounted (mounted, updated, and unmounted in the Options API). All lifecycle hooks are called with their this context pointing to the current active instance, so avoid arrow functions when declaring hooks or you will not be able to reach the component instance through this. Vue automatically associates a registered onMounted callback with the current active component instance, which requires these hooks to be registered synchronously during component setup — registering inside setTimeout will not work — though the call may live in an external function as long as the call stack is synchronous and originates from within setup(). Scope: Vue 3. Reviewed October 4, 2026.