Batched Updates and NextTick

Illustrate how Vue.js 3 batches updates to the DOM and how to use nextTick to perform actions after the DOM has been updated.
<div id='app'>
  <p>{{ message }}</p>
HTML structure with Vue data-binding. An element binds the 'message' property from the Vue instance.
<script src=''></script>
  const { createApp, nextTick } = Vue;

    data() {
      return {
        message: 'Hello'
    mounted() {
      // This will batch the updates
      this.message = 'Hello World';
      this.message = 'Hello Vue 3';

      // Using nextTick to access the DOM after it has been updated
      nextTick().then(() => {
        console.log(document.querySelector('p').textContent); // 'Hello Vue 3'
JavaScript with Vue 3 setup. It demonstrates batched updates to 'message'. The DOM will only be updated once, despite multiple changes to 'message'. The 'nextTick' function is used to log the DOM content after it's updated.
p {
  color: blue;
CSS to style the paragraph element with blue text.