From 7060fccad18bca0f22838a29a16fef740646ee80 Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Tue, 26 Oct 2021 14:41:21 +0900
Subject: [PATCH 1/7] fix: Section scroll error with weird name.

---
 src/core/event/scroll.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js
index bd6661918..15e098920 100644
--- a/src/core/event/scroll.js
+++ b/src/core/event/scroll.js
@@ -147,7 +147,7 @@ export function scrollIntoView(path, id) {
     return;
   }
   const topMargin = config().topMargin;
-  const section = dom.find('#' + id);
+  const section = dom.find(`[id='${id}']`);
   section && scrollTo(section, topMargin);
 
   const li = nav[getNavKey(path, id)];

From c24a7f76b3e864b3af78db31f532903cb0bac76a Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Tue, 26 Oct 2021 15:22:44 +0900
Subject: [PATCH 2/7] fix: vue template matching error

When only using {{ 1 + 1 }} syntax,
It doesn't necessarily have to exists vueGlobalOptions and vueComponents.
---
 src/core/render/index.js | 115 +++++++++++++++++++--------------------
 1 file changed, 56 insertions(+), 59 deletions(-)

diff --git a/src/core/render/index.js b/src/core/render/index.js
index 9fb777baf..3ffc1ea04 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -125,65 +125,62 @@ function renderMain(html) {
     );
 
     // Template syntax, vueComponents, vueGlobalOptions
-    if (docsifyConfig.vueGlobalOptions || vueComponentNames.length) {
-      const reHasBraces = /{{2}[^{}]*}{2}/;
-      // Matches Vue full and shorthand syntax as attributes in HTML tags.
-      //
-      // Full syntax examples:
-      // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
-      //
-      // Shorthand syntax examples:
-      // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
-      //
-      // Markup examples:
-      // <div v-html>{{ html }}</div>
-      // <div v-text="msg"></div>
-      // <div v-bind:text-content.prop="text">
-      // <button v-on:click="doThis"></button>
-      // <button v-on:click.once="doThis"></button>
-      // <button v-on:[event]="doThis"></button>
-      // <button @click.stop.prevent="doThis">
-      // <a :href="url">
-      // <a :[key]="url">
-      const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
-
-      vueMountData.push(
-        ...dom
-          .findAll('.markdown-section > *')
-          // Remove duplicates
-          .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-          // Detect Vue content
-          .filter(elm => {
-            const isVueMount =
-              // is a component
-              elm.tagName.toLowerCase() in
-                (docsifyConfig.vueComponents || {}) ||
-              // has a component(s)
-              elm.querySelector(vueComponentNames.join(',') || null) ||
-              // has curly braces
-              reHasBraces.test(elm.outerHTML) ||
-              // has content directive
-              reHasDirective.test(elm.outerHTML);
-
-            return isVueMount;
-          })
-          .map(elm => {
-            // Clone global configuration
-            const vueConfig = merge({}, docsifyConfig.vueGlobalOptions || {});
-
-            // Replace vueGlobalOptions data() return value with shared data object.
-            // This provides a global store for all Vue instances that receive
-            // vueGlobalOptions as their configuration.
-            if (vueGlobalData) {
-              vueConfig.data = function() {
-                return vueGlobalData;
-              };
-            }
-
-            return [elm, vueConfig];
-          })
-      );
-    }
+    const reHasBraces = /{{2}[^{}]*}{2}/;
+    // Matches Vue full and shorthand syntax as attributes in HTML tags.
+    //
+    // Full syntax examples:
+    // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
+    //
+    // Shorthand syntax examples:
+    // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
+    //
+    // Markup examples:
+    // <div v-html>{{ html }}</div>
+    // <div v-text="msg"></div>
+    // <div v-bind:text-content.prop="text">
+    // <button v-on:click="doThis"></button>
+    // <button v-on:click.once="doThis"></button>
+    // <button v-on:[event]="doThis"></button>
+    // <button @click.stop.prevent="doThis">
+    // <a :href="url">
+    // <a :[key]="url">
+    const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
+
+    vueMountData.push(
+      ...dom
+        .findAll('.markdown-section > *')
+        // Remove duplicates
+        .filter(elm => !vueMountData.some(([e, c]) => e === elm))
+        // Detect Vue content
+        .filter(elm => {
+          const isVueMount =
+            // is a component
+            elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
+            // has a component(s)
+            elm.querySelector(vueComponentNames.join(',') || null) ||
+            // has curly braces
+            reHasBraces.test(elm.outerHTML) ||
+            // has content directive
+            reHasDirective.test(elm.outerHTML);
+
+          return isVueMount;
+        })
+        .map(elm => {
+          // Clone global configuration
+          const vueConfig = merge({}, docsifyConfig.vueGlobalOptions || {});
+
+          // Replace vueGlobalOptions data() return value with shared data object.
+          // This provides a global store for all Vue instances that receive
+          // vueGlobalOptions as their configuration.
+          if (vueGlobalData) {
+            vueConfig.data = function() {
+              return vueGlobalData;
+            };
+          }
+
+          return [elm, vueConfig];
+        })
+    );
 
     // Mount
     for (const [mountElm, vueConfig] of vueMountData) {

From 14cf64639a52ef34648e7f60252f039e0656eef6 Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Tue, 26 Oct 2021 18:50:07 +0900
Subject: [PATCH 3/7] Support vue in sidebar

---
 src/core/render/index.js | 165 ++++-------------------------------
 src/core/render/vue.js   | 181 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 197 insertions(+), 149 deletions(-)
 create mode 100644 src/core/render/vue.js

diff --git a/src/core/render/index.js b/src/core/render/index.js
index 3ffc1ea04..bfa215acc 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -7,13 +7,12 @@ import { callHook } from '../init/lifecycle';
 import { getAndActive, sticky } from '../event/sidebar';
 import { getPath, isAbsolutePath } from '../router/util';
 import { isMobile, inBrowser } from '../util/env';
-import { isPrimitive, merge } from '../util/core';
+import { isPrimitive } from '../util/core';
 import { scrollActiveSidebar } from '../event/scroll';
 import { Compiler } from './compiler';
 import * as tpl from './tpl';
 import { prerenderEmbed } from './embed';
-
-let vueGlobalData;
+import * as vue from './vue';
 
 function executeScript() {
   const script = dom
@@ -45,35 +44,14 @@ function formatUpdated(html, updated, fn) {
 function renderMain(html) {
   const docsifyConfig = this.config;
   const markdownElm = dom.find('.markdown-section');
-  const vueVersion =
-    'Vue' in window &&
-    window.Vue.version &&
-    Number(window.Vue.version.charAt(0));
-
-  const isMountedVue = elm => {
-    const isVue2 = Boolean(elm.__vue__ && elm.__vue__._isVue);
-    const isVue3 = Boolean(elm._vnode && elm._vnode.__v_skip);
-
-    return isVue2 || isVue3;
-  };
 
   if (!html) {
     html = '<h1>404 - Not found</h1>';
   }
 
+  // Unmount vue
   if ('Vue' in window) {
-    const mountedElms = dom
-      .findAll('.markdown-section > *')
-      .filter(elm => isMountedVue(elm));
-
-    // Destroy/unmount existing Vue instances
-    for (const mountedElm of mountedElms) {
-      if (vueVersion === 2) {
-        mountedElm.__vue__.$destroy();
-      } else if (vueVersion === 3) {
-        mountedElm.__vue_app__.unmount();
-      }
-    }
+    vue.unmountVueInst(markdownElm, '.markdown-section > *');
   }
 
   this._renderTo(markdownElm, html);
@@ -89,130 +67,9 @@ function renderMain(html) {
     executeScript();
   }
 
-  // Handle Vue content not mounted by markdown <script>
+  // Mount vue
   if ('Vue' in window) {
-    const vueMountData = [];
-    const vueComponentNames = Object.keys(docsifyConfig.vueComponents || {});
-
-    // Register global vueComponents
-    if (vueVersion === 2 && vueComponentNames.length) {
-      vueComponentNames.forEach(name => {
-        const isNotRegistered = !window.Vue.options.components[name];
-
-        if (isNotRegistered) {
-          window.Vue.component(name, docsifyConfig.vueComponents[name]);
-        }
-      });
-    }
-
-    // Store global data() return value as shared data object
-    if (
-      !vueGlobalData &&
-      docsifyConfig.vueGlobalOptions &&
-      typeof docsifyConfig.vueGlobalOptions.data === 'function'
-    ) {
-      vueGlobalData = docsifyConfig.vueGlobalOptions.data();
-    }
-
-    // vueMounts
-    vueMountData.push(
-      ...Object.keys(docsifyConfig.vueMounts || {})
-        .map(cssSelector => [
-          dom.find(markdownElm, cssSelector),
-          docsifyConfig.vueMounts[cssSelector],
-        ])
-        .filter(([elm, vueConfig]) => elm)
-    );
-
-    // Template syntax, vueComponents, vueGlobalOptions
-    const reHasBraces = /{{2}[^{}]*}{2}/;
-    // Matches Vue full and shorthand syntax as attributes in HTML tags.
-    //
-    // Full syntax examples:
-    // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
-    //
-    // Shorthand syntax examples:
-    // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
-    //
-    // Markup examples:
-    // <div v-html>{{ html }}</div>
-    // <div v-text="msg"></div>
-    // <div v-bind:text-content.prop="text">
-    // <button v-on:click="doThis"></button>
-    // <button v-on:click.once="doThis"></button>
-    // <button v-on:[event]="doThis"></button>
-    // <button @click.stop.prevent="doThis">
-    // <a :href="url">
-    // <a :[key]="url">
-    const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
-
-    vueMountData.push(
-      ...dom
-        .findAll('.markdown-section > *')
-        // Remove duplicates
-        .filter(elm => !vueMountData.some(([e, c]) => e === elm))
-        // Detect Vue content
-        .filter(elm => {
-          const isVueMount =
-            // is a component
-            elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
-            // has a component(s)
-            elm.querySelector(vueComponentNames.join(',') || null) ||
-            // has curly braces
-            reHasBraces.test(elm.outerHTML) ||
-            // has content directive
-            reHasDirective.test(elm.outerHTML);
-
-          return isVueMount;
-        })
-        .map(elm => {
-          // Clone global configuration
-          const vueConfig = merge({}, docsifyConfig.vueGlobalOptions || {});
-
-          // Replace vueGlobalOptions data() return value with shared data object.
-          // This provides a global store for all Vue instances that receive
-          // vueGlobalOptions as their configuration.
-          if (vueGlobalData) {
-            vueConfig.data = function() {
-              return vueGlobalData;
-            };
-          }
-
-          return [elm, vueConfig];
-        })
-    );
-
-    // Mount
-    for (const [mountElm, vueConfig] of vueMountData) {
-      const isVueAttr = 'data-isvue';
-      const isSkipElm =
-        // Is an invalid tag
-        mountElm.matches('pre, script') ||
-        // Is a mounted instance
-        isMountedVue(mountElm) ||
-        // Has mounted instance(s)
-        mountElm.querySelector(`[${isVueAttr}]`);
-
-      if (!isSkipElm) {
-        mountElm.setAttribute(isVueAttr, '');
-
-        if (vueVersion === 2) {
-          vueConfig.el = undefined;
-          new window.Vue(vueConfig).$mount(mountElm);
-        } else if (vueVersion === 3) {
-          const app = window.Vue.createApp(vueConfig);
-
-          // Register global vueComponents
-          vueComponentNames.forEach(name => {
-            const config = docsifyConfig.vueComponents[name];
-
-            app.component(name, config);
-          });
-
-          app.mount(mountElm);
-        }
-      }
-    }
+    vue.mountVueInst(docsifyConfig, markdownElm, '.markdown-section > *');
   }
 }
 
@@ -246,6 +103,7 @@ export function renderMixin(proto) {
 
   proto._renderSidebar = function(text) {
     const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
+    const sidebarElm = dom.find('.sidebar-nav');
 
     if (hideSidebar) {
       // FIXME : better styling solution
@@ -260,6 +118,11 @@ export function renderMixin(proto) {
       return null;
     }
 
+    // Unmount vue
+    if ('Vue' in window) {
+      vue.unmountVueInst(sidebarElm, '.sidebar-nav > *');
+    }
+
     this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
     const activeEl = getAndActive(this.router, '.sidebar-nav', true, true);
     if (loadSidebar && activeEl) {
@@ -269,6 +132,10 @@ export function renderMixin(proto) {
       // Reset toc
       this.compiler.subSidebar();
     }
+    // Mount vue
+    if ('Vue' in window) {
+      vue.mountVueInst(this.config, sidebarElm, '.sidebar-nav > *');
+    }
 
     // Bind event
     this._bindEventOnRendered(activeEl);
diff --git a/src/core/render/vue.js b/src/core/render/vue.js
new file mode 100644
index 000000000..9004f6a70
--- /dev/null
+++ b/src/core/render/vue.js
@@ -0,0 +1,181 @@
+import * as dom from '../util/dom';
+import { merge } from '../util/core';
+
+let vueGlobalData;
+
+export function getVueVersion() {
+  return (
+    'Vue' in window &&
+    window.Vue.version &&
+    Number(window.Vue.version.charAt(0))
+  );
+}
+
+/**
+ * Get if element is mounted with vue
+ * @example
+ * @param  {Element} elm The Element that check if mounted with vue
+ * @return {Boolean} Is mounted with vue
+ */
+export function isMountedVue(elm) {
+  const isVue2 = Boolean(elm.__vue__ && elm.__vue__._isVue);
+  const isVue3 = Boolean(elm._vnode && elm._vnode.__v_skip);
+
+  return isVue2 || isVue3;
+}
+
+/**
+ * Unmount existing vue instances
+ * @param {String|Element} el The root element where to perform the search from
+ * @param {Element} node The query
+ * @example
+ * unmountVueInst('a') => dom.findAll(el, node)
+ * unmountVueInst(nav, 'a') => dom.findAll(node)
+ */
+export function unmountVueInst(el, node) {
+  const vueVersion = getVueVersion();
+
+  if ('Vue' in window) {
+    const mountedElms = (node
+      ? dom.findAll(el, node)
+      : dom.findAll(node)
+    ).filter(elm => isMountedVue(elm));
+
+    // Destroy/unmount existing Vue instances
+    for (const mountedElm of mountedElms) {
+      if (vueVersion === 2) {
+        mountedElm.__vue__.$destroy();
+      } else if (vueVersion === 3) {
+        mountedElm.__vue_app__.unmount();
+      }
+    }
+  }
+}
+
+/**
+ * Mount vue instance
+ */
+export function mountVueInst(docsifyConfig, el, node) {
+  const vueVersion = getVueVersion();
+  const vueMountData = [];
+  const vueComponentNames = Object.keys(docsifyConfig.vueComponents || {});
+
+  // Register global vueComponents
+  if (vueVersion === 2 && vueComponentNames.length) {
+    vueComponentNames.forEach(name => {
+      const isNotRegistered = !window.Vue.options.components[name];
+
+      if (isNotRegistered) {
+        window.Vue.component(name, docsifyConfig.vueComponents[name]);
+      }
+    });
+  }
+
+  // Store global data() return value as shared data object
+  if (
+    !vueGlobalData &&
+    docsifyConfig.vueGlobalOptions &&
+    typeof docsifyConfig.vueGlobalOptions.data === 'function'
+  ) {
+    vueGlobalData = docsifyConfig.vueGlobalOptions.data();
+  }
+
+  // vueMounts
+  vueMountData.push(
+    ...Object.keys(docsifyConfig.vueMounts || {})
+      .map(cssSelector => [
+        dom.find(el, cssSelector),
+        docsifyConfig.vueMounts[cssSelector],
+      ])
+      .filter(([elm /* , vueConfig*/]) => elm)
+  );
+
+  // Template syntax, vueComponents, vueGlobalOptions
+  const reHasBraces = /{{2}[^{}]*}{2}/;
+  // Matches Vue full and shorthand syntax as attributes in HTML tags.
+  //
+  // Full syntax examples:
+  // v-foo, v-foo[bar], v-foo-bar, v-foo:bar-baz.prop
+  //
+  // Shorthand syntax examples:
+  // @foo, @foo.bar, @foo.bar.baz, @[foo], :foo, :[foo]
+  //
+  // Markup examples:
+  // <div v-html>{{ html }}</div>
+  // <div v-text="msg"></div>
+  // <div v-bind:text-content.prop="text">
+  // <button v-on:click="doThis"></button>
+  // <button v-on:click.once="doThis"></button>
+  // <button v-on:[event]="doThis"></button>
+  // <button @click.stop.prevent="doThis">
+  // <a :href="url">
+  // <a :[key]="url">
+  const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
+
+  vueMountData.push(
+    ...dom
+      .findAll(node)
+      // Remove duplicates
+      .filter(elm => !vueMountData.some(([e]) => e === elm))
+      // Detect Vue content
+      .filter(elm => {
+        const isVueMount =
+          // is a component
+          elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
+          // has a component(s)
+          elm.querySelector(vueComponentNames.join(',') || null) ||
+          // has curly braces
+          reHasBraces.test(elm.outerHTML) ||
+          // has content directive
+          reHasDirective.test(elm.outerHTML);
+
+        return isVueMount;
+      })
+      .map(elm => {
+        // Clone global configuration
+        const vueConfig = merge({}, docsifyConfig.vueGlobalOptions || {});
+
+        // Replace vueGlobalOptions data() return value with shared data object.
+        // This provides a global store for all Vue instances that receive
+        // vueGlobalOptions as their configuration.
+        if (vueGlobalData) {
+          vueConfig.data = function() {
+            return vueGlobalData;
+          };
+        }
+
+        return [elm, vueConfig];
+      })
+  );
+
+  // Mount
+  for (const [mountElm, vueConfig] of vueMountData) {
+    const isVueAttr = 'data-isvue';
+    const isSkipElm =
+      // Is an invalid tag
+      mountElm.matches('pre, script') ||
+      // Is a mounted instance
+      isMountedVue(mountElm) ||
+      // Has mounted instance(s)
+      mountElm.querySelector(`[${isVueAttr}]`);
+
+    if (!isSkipElm) {
+      mountElm.setAttribute(isVueAttr, '');
+
+      if (vueVersion === 2) {
+        vueConfig.el = undefined;
+        new window.Vue(vueConfig).$mount(mountElm);
+      } else if (vueVersion === 3) {
+        const app = window.Vue.createApp(vueConfig);
+        // Register global vueComponents
+        vueComponentNames.forEach(name => {
+          const config = docsifyConfig.vueComponents[name];
+
+          app.component(name, config);
+        });
+
+        app.mount(mountElm);
+      }
+    }
+  }
+}

From 793f67537d66a4aa235f76e1cbf9af9b74638d93 Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Tue, 26 Oct 2021 21:54:21 +0900
Subject: [PATCH 4/7] Update vue.test.js

I updated it according to the vue-related modifications in the commitment. 14cf64639a52ef34648e7f60252f039e0656eef6
---
 test/e2e/vue.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index ce13a4d42..1bdddca41 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -154,7 +154,7 @@ describe('Vue.js Compatibility', function() {
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
-        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuefor', '12345');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
         await expect(page).toEqualText('#vuemounts p', '---');

From c70e4d7c4f91cc3a72f8c129288728dcfc406c99 Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Wed, 27 Oct 2021 01:13:26 +0900
Subject: [PATCH 5/7] Update vue.js a little

---
 src/core/render/vue.js | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/core/render/vue.js b/src/core/render/vue.js
index 9004f6a70..7a2c738be 100644
--- a/src/core/render/vue.js
+++ b/src/core/render/vue.js
@@ -38,7 +38,7 @@ export function unmountVueInst(el, node) {
   if ('Vue' in window) {
     const mountedElms = (node
       ? dom.findAll(el, node)
-      : dom.findAll(node)
+      : dom.findAll(el)
     ).filter(elm => isMountedVue(elm));
 
     // Destroy/unmount existing Vue instances
@@ -81,14 +81,16 @@ export function mountVueInst(docsifyConfig, el, node) {
   }
 
   // vueMounts
-  vueMountData.push(
-    ...Object.keys(docsifyConfig.vueMounts || {})
-      .map(cssSelector => [
-        dom.find(el, cssSelector),
-        docsifyConfig.vueMounts[cssSelector],
-      ])
-      .filter(([elm /* , vueConfig*/]) => elm)
-  );
+  if (docsifyConfig.vueMounts.length) {
+    vueMountData.push(
+      ...Object.keys(docsifyConfig.vueMounts || {})
+        .map(cssSelector => [
+          dom.find(el, cssSelector),
+          docsifyConfig.vueMounts[cssSelector],
+        ])
+        .filter(([elm]) => elm)
+    );
+  }
 
   // Template syntax, vueComponents, vueGlobalOptions
   const reHasBraces = /{{2}[^{}]*}{2}/;
@@ -111,19 +113,20 @@ export function mountVueInst(docsifyConfig, el, node) {
   // <a :href="url">
   // <a :[key]="url">
   const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
+  const joinedVueComponentNames = vueComponentNames.join(',') || null;
 
   vueMountData.push(
     ...dom
-      .findAll(node)
+      .findAll(el, node)
       // Remove duplicates
       .filter(elm => !vueMountData.some(([e]) => e === elm))
       // Detect Vue content
       .filter(elm => {
         const isVueMount =
           // is a component
-          elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
+          // elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
           // has a component(s)
-          elm.querySelector(vueComponentNames.join(',') || null) ||
+          elm.querySelector(joinedVueComponentNames) ||
           // has curly braces
           reHasBraces.test(elm.outerHTML) ||
           // has content directive

From 6b4077278b1224e848537906232433624c9fd3e8 Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Wed, 27 Oct 2021 01:24:39 +0900
Subject: [PATCH 6/7] Revert "Update vue.test.js"

This reverts commit 793f67537d66a4aa235f76e1cbf9af9b74638d93.
---
 test/e2e/vue.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index 1bdddca41..ce13a4d42 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -154,7 +154,7 @@ describe('Vue.js Compatibility', function() {
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
-        await expect(page).toEqualText('#vuefor', '12345');
+        await expect(page).toEqualText('#vuefor', '{{ i }}');
         await expect(page).toEqualText('#vuecomponent', '---');
         await expect(page).toEqualText('#vueglobaloptions p', '---');
         await expect(page).toEqualText('#vuemounts p', '---');

From 43ed9379ec96e19b8f84f7aa792316104200befb Mon Sep 17 00:00:00 2001
From: 2jun0 <soo28819@naver.com>
Date: Wed, 27 Oct 2021 02:07:58 +0900
Subject: [PATCH 7/7] update vue test

I think vue.js should be update.
---
 src/core/render/vue.js | 23 ++++++++++-------------
 test/e2e/vue.test.js   |  6 +++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/core/render/vue.js b/src/core/render/vue.js
index 7a2c738be..3bcaf10ed 100644
--- a/src/core/render/vue.js
+++ b/src/core/render/vue.js
@@ -81,16 +81,14 @@ export function mountVueInst(docsifyConfig, el, node) {
   }
 
   // vueMounts
-  if (docsifyConfig.vueMounts.length) {
-    vueMountData.push(
-      ...Object.keys(docsifyConfig.vueMounts || {})
-        .map(cssSelector => [
-          dom.find(el, cssSelector),
-          docsifyConfig.vueMounts[cssSelector],
-        ])
-        .filter(([elm]) => elm)
-    );
-  }
+  vueMountData.push(
+    ...Object.keys(docsifyConfig.vueMounts || {})
+      .map(cssSelector => [
+        dom.find(el, cssSelector),
+        docsifyConfig.vueMounts[cssSelector],
+      ])
+      .filter(([elm]) => elm)
+  );
 
   // Template syntax, vueComponents, vueGlobalOptions
   const reHasBraces = /{{2}[^{}]*}{2}/;
@@ -113,7 +111,6 @@ export function mountVueInst(docsifyConfig, el, node) {
   // <a :href="url">
   // <a :[key]="url">
   const reHasDirective = /<[^>/]+\s([@:]|v-)[\w-:.[\]]+[=>\s]/;
-  const joinedVueComponentNames = vueComponentNames.join(',') || null;
 
   vueMountData.push(
     ...dom
@@ -124,9 +121,9 @@ export function mountVueInst(docsifyConfig, el, node) {
       .filter(elm => {
         const isVueMount =
           // is a component
-          // elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
+          elm.tagName.toLowerCase() in (docsifyConfig.vueComponents || {}) ||
           // has a component(s)
-          elm.querySelector(joinedVueComponentNames) ||
+          elm.querySelector(vueComponentNames.join(',') || null) ||
           // has curly braces
           reHasBraces.test(elm.outerHTML) ||
           // has content directive
diff --git a/test/e2e/vue.test.js b/test/e2e/vue.test.js
index ce13a4d42..f0759602f 100644
--- a/test/e2e/vue.test.js
+++ b/test/e2e/vue.test.js
@@ -154,10 +154,10 @@ describe('Vue.js Compatibility', function() {
         docsifyInitConfig.scriptURLs = vueURL;
 
         await docsifyInit(docsifyInitConfig);
-        await expect(page).toEqualText('#vuefor', '{{ i }}');
+        await expect(page).toEqualText('#vuefor', '12345');
         await expect(page).toEqualText('#vuecomponent', '---');
-        await expect(page).toEqualText('#vueglobaloptions p', '---');
-        await expect(page).toEqualText('#vuemounts p', '---');
+        expect(await page.innerText('#vueglobaloptions p')).toBe('');
+        expect(await page.innerText('#vuemounts p')).toBe('');
         await expect(page).toEqualText('#vuescript p', 'vuescript');
       });