onUpdated()

Registers a callback run after the component re-renders the DOM.

Since Vue 3.0 Spec ↗

Syntax

onUpdated(callback): void

Parameters

NameTypeRequiredDescription
callback () => void No Function run after a reactive update patches the DOM.

Returns

void — Nothing; registers the hook.

Examples

<script setup lang="ts">
import { ref, onUpdated } from 'vue';

const count = ref(0);
onUpdated(() => {
  console.log('DOM updated, count is', count.value);
});
</script>

<template><button @click="count++">{{ count }}</button></template>

Notes

Runs after every re-render caused by a reactive change, when the DOM is in sync with state. Do not mutate state here without a guard, as it can cause an update loop. For one-time post-update work prefer awaiting nextTick().