fix: [Vue warn]: Missing ref owner context. ref cannot be used on hoi…

…sted vnodes. -- #137

seems could not use `:ref="xxx"` not more here

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
 
     <!--
-      migration.2
+      vue3 migration.2
       fix: [Vue warn]: (deprecation COMPONENT_V_MODEL) v-model usage on component has changed in Vue 3. Component that expects to work with v-model should now use the "modelValue" prop and emit the "update:modelValue" event. You can update the usage and then opt-in to Vue 3 behavior on a per-component basis with `compatConfig: { COMPONENT_V_MODEL: false }`.
       Details: https://v3-migration.vuejs.org/breaking-changes/v-model.html
     -->
@@ -19,7 +19,7 @@
       </template>
 
       <!--
-        migration.4
+        // vue3 migration.4
         fix: [Vue warn]: (deprecation ATTR_ENUMERATED_COERCION) Enumerated attribute "contenteditable" with v-bind value `` will render the value as-is instead of coercing the value to "true" in Vue 3. Always use explicit "true" or "false" values for enumerated attributes. If the usage is intended, you can disable the compat behavior and suppress this warning with:
           configureCompat({ ATTR_ENUMERATED_COERCION: false })
         Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html

src/At.vue

@@ -1,11 +1,4 @@
 <script>
-
-// fixme: todo: migration.6
-// [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
-// A vnode with ref must be created inside the render function.
-// at selectByMouse
-// at handleItemHover
-
 import {
   closest, getOffset, getPrecedingRange,
   getRange, applyRange,
@@ -141,7 +134,7 @@ export default {
     }
   },
   mounted () {
-    // migration.5
+    // vue3 migration.5
     // [Vue warn]: (deprecation INSTANCE_SCOPED_SLOTS) vm.$scopedSlots has been removed. Use vm.$slots instead.
     // Details: https://v3-migration.vuejs.org/breaking-changes/slots-unification.html
     if (this.$slots.embeddedItem) {
@@ -381,7 +374,16 @@ export default {
     },
 
     scrollToCur () {
-      const curEl = this.$refs.cur[0]
+      // vue3 migration.6
+      // fix: [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
+      // A vnode with ref must be created inside the render function.
+      // at selectByMouse
+      // at handleItemHover
+      // const curEl = this.$refs.cur[0]
+      let { wrap } = this.$refs
+      let { cur } = this.atwho
+      const curEl = wrap.querySelector(`.atwho-li[data-index="${cur}"]`)
+
       const scrollParent = curEl.parentElement.parentElement // .atwho-view
       scrollIntoView(curEl, scrollParent)
     },
@@ -475,8 +477,15 @@ export default {
       if (customsEmbedded) {
         // `suffix` is ignored as `customsEmbedded=true` has to be
         // wrapped around by spaces
-        const html = this.$refs.embeddedItem.firstChild.innerHTML
-        this.insertHtml(html, r);
+
+        // vue3 migration.7
+        // fix: Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
+        // at Proxy.insertItem (At.vue?075e:490:1)
+        // at Proxy.handleItemClick (At.vue?075e:184:1)
+        // const html = this.$refs.embeddedItem.firstChild.innerHTML
+        const html = this.$refs.embeddedItem.firstElementChild.innerHTML
+
+        this.insertHtml(html, r)
       } else {
         const t = itemName(curItem) + suffix
         this.insertText(t, r);

src/AtTemplate.vue

@@ -19,7 +19,6 @@
               class="atwho-li"
               :key="index"
               :class="isCur(index) && 'atwho-cur'"
-              :ref="isCur(index) && 'cur'"
               :data-index="index"
               @mouseenter="handleItemHover"
               @click="handleItemClick"

src/main.js

@@ -9,20 +9,20 @@ import App from './App.vue'
 // Vue.use(ElementUI)
 
 configureCompat({
-  // migration.3
+  // vue3 migration.3
   // fix: [Vue warn]: (deprecation WATCH_ARRAY) "watch" option or vm.$watch on an array value will no longer trigger on array mutation unless the "deep" option is specified. If current usage is intended, you can disable the compat behavior and suppress this warning with:
   //   configureCompat({ WATCH_ARRAY: false })
   // Details: https://v3-migration.vuejs.org/breaking-changes/watch.html
   WATCH_ARRAY: false,
 
-  // migration.4
+  // vue3 migration.4
   // fix: [Vue warn]: (deprecation ATTR_ENUMERATED_COERCION) Enumerated attribute "contenteditable" with v-bind value `` will render the value as-is instead of coercing the value to "true" in Vue 3. Always use explicit "true" or "false" values for enumerated attributes. If the usage is intended, you can disable the compat behavior and suppress this warning with:
   //   configureCompat({ ATTR_ENUMERATED_COERCION: false })
   // Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
   ATTR_ENUMERATED_COERCION: false,
 })
 
-// migration.1
+// vue3 migration.1
 // fix: [Vue warn]: (deprecation GLOBAL_MOUNT) The global app bootstrapping API has changed: vm.$mount() and the "el" option have been removed. Use createApp(RootComponent).mount() instead.
 // Details: https://v3-migration.vuejs.org/breaking-changes/global-api.html#mounting-app-instance
 let app = createApp(App)