fix(vue-2): use mounted lifecycle in FloatingMenu

.changeset/2026-05-27-fix-vue-2-floating-menu-watcher-error.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/vue-2': patch
+---
+
+Fix FloatingMenu not registering when the editor prop is provided synchronously, which prevented the menu from appearing

packages/vue-2/src/menus/FloatingMenu.ts

@@ -16,6 +16,7 @@ export interface FloatingMenuInterface extends Vue {
   appendTo: FloatingMenuPluginProps['appendTo']
   shouldShow: FloatingMenuPluginProps['shouldShow']
   getPluginKey: () => FloatingMenuPluginProps['pluginKey']
+  isDestroyed: boolean
 }
 
 export const FloatingMenu: Component = {
@@ -58,39 +59,38 @@ export const FloatingMenu: Component = {
     },
   },
 
-  watch: {
-    editor: {
-      immediate: true,
-      handler(this: FloatingMenuInterface, editor: FloatingMenuPluginProps['editor']) {
-        if (!editor) {
-          return
-        }
-
-        if (!this.$el) {
-          return
-        }
-
-        ;(this.$el as HTMLElement).style.visibility = 'hidden'
-        ;(this.$el as HTMLElement).style.position = 'absolute'
-
-        this.$el.remove()
-
-        this.$nextTick(() => {
-          editor.registerPlugin(
-            FloatingMenuPlugin({
-              pluginKey: this.getPluginKey(),
-              editor,
-              element: this.$el as HTMLElement,
-              updateDelay: this.updateDelay,
-              resizeDelay: this.resizeDelay,
-              options: this.options,
-              appendTo: this.appendTo,
-              shouldShow: this.shouldShow,
-            }),
-          )
-        })
-      },
-    },
+  mounted(this: FloatingMenuInterface) {
+    const editor = this.editor
+    const el = this.$el as HTMLElement
+
+    if (!editor || !el) {
+      return
+    }
+
+    el.style.visibility = 'hidden'
+    el.style.position = 'absolute'
+
+    // Remove element from DOM; plugin will re-parent it when shown
+    el.remove()
+
+    this.$nextTick(() => {
+      if (this.isDestroyed) {
+        return
+      }
+
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey: this.getPluginKey(),
+          editor,
+          element: el,
+          updateDelay: this.updateDelay,
+          resizeDelay: this.resizeDelay,
+          options: this.options,
+          appendTo: this.appendTo,
+          shouldShow: this.shouldShow,
+        }),
+      )
+    })
   },
 
   render(this: FloatingMenuInterface, createElement: CreateElement) {
@@ -109,7 +109,15 @@ export const FloatingMenu: Component = {
   },
 
   beforeDestroy(this: FloatingMenuInterface) {
-    this.editor.unregisterPlugin(this.getPluginKey())
+    this.isDestroyed = true
+
+    const editor = this.editor
+
+    if (!editor) {
+      return
+    }
+
+    editor.unregisterPlugin(this.getPluginKey())
   },
 
   methods: {