Get your own Vue server
  <h2>Example $nextTick() Method</h2>
  <p>The $nextTick() method waits for the DOM to update so that we can get the new, updated value from the DOM after re-render.</p>
    <p ref="pEl">{{ message }}</p>
    <button v-on:click.once="updateMsg">Update Message</button>
      <li v-for="x in results">{{ x }}</li>
  <p>Comments to the code:</p>
    <li><span>Line 30:</span> The 'message' data property is updated. This triggers a DOM update.</li>
    <li><span>Line 31:</span> The DOM update have not actually happened yet at this point, so the value we get here is the old value.</li>
    <li><span>Line 32-34:</span> $nextTick() waits for the DOM to update, so at this point we get the new text value from the updated p-tag.</li>

export default {
  data() {
    return {
      message: '"Initial Message"',
      results: []
  methods: {
    updateMsg() {
      this.message = '"Hello! This is a new message."';
      this.$nextTick(() => {
        this.results.push(this.$refs.pEl.textContent + ' (using $nextTick())');

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
span {
  text-decoration: underline;
import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)