From c547d669ab188f4e81027c7a42aa9c73490b0155 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Fri, 17 Jul 2026 11:02:31 +1000
Subject: [PATCH 1/2] Docs: TINYDOC-3432 - Document Vue 3 prop-driven content
 updates in the Vue technical reference

---
 .../partials/integrations/vue-tech-ref.adoc   | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index 170c9a1710..7e792e7d47 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -19,6 +19,7 @@
 ** xref:toolbar[`+toolbar+`]
 ** xref:tinymce-script-src[`+tinymce-script-src+`]
 * xref:form-input-bindings-v-model[Form Input Bindings: `+v-model+`]
+** xref:updating-the-editor-content-from-a-parent-component[Updating the editor content from a parent component]
 * xref:event-binding[Event binding]
 
 [[installing-the-tinymce-vuejs-integration-using-npm]]
@@ -435,6 +436,81 @@ The `+v-model+` directive can be used to create a two-way data binding. For exam
 
 For information on `+v-model+` and form input bindings, see: link:https://vuejs.org/guide/essentials/forms.html[Vue.js documentation - Form Input Bindings].
 
+[[updating-the-editor-content-from-a-parent-component]]
+=== Updating the editor content from a parent component
+
+When `+v-model+` (or an explicit `+@update:modelValue+` listener) is bound, the component watches the bound value and updates the editor whenever a parent component reassigns it. On each change, the component calls `+editor.setContent()+` with the new value, so no manual editor call is required.
+
+To avoid resetting the editor unnecessarily, the update runs only when all of the following are true:
+
+* The new value is a string.
+* The new value differs from the previous bound value.
+* The new value differs from the current editor content, compared using the xref:output-format[`+output-format+`] format.
+
+The final guard prevents a redundant `+setContent()+` call, and the loss of cursor position that would accompany it, during the normal editing round trip where an edit emits `+update:modelValue+` and updates the bound value in the parent.
+
+==== Example: updating content through `+v-model+`
+
+Reassigning the bound value in the parent updates the editor to match:
+
+[source,html]
+----
+<template>
+  <editor v-model="content" />
+  <button @click="setContent">Update content</button>
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue';
+
+export default {
+  components: { editor: Editor },
+  data() {
+    return { content: '<p>Initial content.</p>' };
+  },
+  methods: {
+    setContent() {
+      this.content = '<p>Updated from the parent.</p>';
+    }
+  }
+};
+</script>
+----
+
+==== Updating content without `+v-model+`
+
+The content watcher is only active when `+v-model+` or an `+@update:modelValue+` listener is bound. When content is supplied as a one-way prop without `+v-model+`, reassigning that prop does not update the editor.
+
+In that case, obtain the editor instance from the `+init+` event and call `+editor.setContent()+` directly:
+
+[source,html]
+----
+<template>
+  <editor :init="{ /* your other settings */ }" @init="storeEditor" />
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue';
+
+export default {
+  components: { editor: Editor },
+  data() {
+    return { editorRef: null };
+  },
+  methods: {
+    storeEditor(event, editor) {
+      this.editorRef = editor;
+    },
+    updateContent(html) {
+      if (this.editorRef) {
+        this.editorRef.setContent(html);
+      }
+    }
+  }
+};
+</script>
+----
+
 [[event-binding]]
 == Event binding
 

From 1fcab53619b223319f99a08961f8b3c0542bb95c Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Fri, 17 Jul 2026 13:40:42 +1000
Subject: [PATCH 2/2] Docs: TINYDOC-3432 - Trim non-v-model fallback; keep
 v-model watch behavior and guards

---
 .../partials/integrations/vue-tech-ref.adoc   | 34 +------------------
 1 file changed, 1 insertion(+), 33 deletions(-)

diff --git a/modules/ROOT/partials/integrations/vue-tech-ref.adoc b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
index 7e792e7d47..d729144d82 100644
--- a/modules/ROOT/partials/integrations/vue-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/vue-tech-ref.adoc
@@ -477,39 +477,7 @@ export default {
 </script>
 ----
 
-==== Updating content without `+v-model+`
-
-The content watcher is only active when `+v-model+` or an `+@update:modelValue+` listener is bound. When content is supplied as a one-way prop without `+v-model+`, reassigning that prop does not update the editor.
-
-In that case, obtain the editor instance from the `+init+` event and call `+editor.setContent()+` directly:
-
-[source,html]
-----
-<template>
-  <editor :init="{ /* your other settings */ }" @init="storeEditor" />
-</template>
-
-<script>
-import Editor from '@tinymce/tinymce-vue';
-
-export default {
-  components: { editor: Editor },
-  data() {
-    return { editorRef: null };
-  },
-  methods: {
-    storeEditor(event, editor) {
-      this.editorRef = editor;
-    },
-    updateContent(html) {
-      if (this.editorRef) {
-        this.editorRef.setContent(html);
-      }
-    }
-  }
-};
-</script>
-----
+This watcher is only active when `+v-model+` or an `+@update:modelValue+` listener is bound. Without it, reassigning a one-way content prop does not update the editor; use xref:event-binding[the `+init+` event] to obtain the editor instance and call its content APIs directly.
 
 [[event-binding]]
 == Event binding