diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index 22ea1f62..07e6e780 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
@@ -39,13 +39,15 @@ export default {
   methods: {
     handleUpdate() {
       const headings = []
+      const transaction = this.editor.state.tr
 
       this.editor.state.doc.descendants((node, pos) => {
         if (node.type.name === 'heading') {
           const id = `heading-${headings.length + 1}`
 
           if (node.attrs.id !== id) {
-            this.updateNodeAttributes(node, pos, {
+            transaction.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
               id,
             })
           }
@@ -58,28 +60,17 @@ export default {
         }
       })
 
-      this.headings = headings
-    },
-    updateNodeAttributes(node, pos, attributes) {
-      const { state } = this.editor.view
-      const transaction = state.tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        ...attributes,
-      })
+      transaction.setMeta('preventUpdate', true)
 
-      console.log(pos, undefined, {
-        ...node.attrs,
-        ...attributes,
-      })
-
-      // TODO: Why is that not needed? 🤔
       this.editor.view.dispatch(transaction)
+
+      this.headings = headings
     },
   },
 
   mounted() {
     this.editor.on('update', this.handleUpdate)
-    this.handleUpdate()
+    this.$nextTick(this.handleUpdate)
   },
 }
 </script>
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
index 2b8cb8b4..9db45b5f 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
+++ b/docs/src/demos/Guide/NodeViews/TableOfContents/index.vue
@@ -27,6 +27,7 @@ export default {
         TableOfContents,
       ],
       content: `
+        <toc></toc>
         <h2>1 heading</h2>
         <p>paragraph</p>
         <h3>1.1 heading</h3>
@@ -37,7 +38,6 @@ export default {
         <p>paragraph</p>
         <h3>2.1 heading</h3>
         <p>paragraph</p>
-        <toc></toc>
       `,
     })
   },