From aa3a8ea253b73b7c29d617bebc0f710486db15ce Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 18 Sep 2022 17:26:48 +0800
Subject: [PATCH] Revert "Vue2: Fix play's within(canvas) by preserving
 `#storybook-root`"

This reverts commit b8380fa5ecff7911476254619dd79aa62dac89fa.
---
 code/renderers/vue/src/render.ts | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts
index 060a7e0f4e37..22fec5d8bdbf 100644
--- a/code/renderers/vue/src/render.ts
+++ b/code/renderers/vue/src/render.ts
@@ -9,7 +9,7 @@ import type { VueFramework } from './types';
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
 
-const map = new Map<Element, [Instance, Element]>();
+const map = new Map<Element, Instance>();
 type Instance = CombinedVueInstance<
   Vue,
   {
@@ -21,16 +21,11 @@ type Instance = CombinedVueInstance<
   Record<never, any>,
   unknown
 >;
-const getRoot = (domElement: Element): [Instance, Element] => {
+const getRoot = (domElement: Element): Instance => {
   if (map.has(domElement)) {
     return map.get(domElement);
   }
 
-  // Create a dummy "target" underneath #storybook-root
-  // that Vue2 will replace on first render with #storybook-vue-root
-  const target = document.createElement('div');
-  domElement.appendChild(target);
-
   const instance = new Vue({
     beforeDestroy() {
       map.delete(domElement);
@@ -42,13 +37,13 @@ const getRoot = (domElement: Element): [Instance, Element] => {
       };
     },
     render(h) {
-      map.set(domElement, [instance, target]);
+      map.set(domElement, instance);
       const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-      return h('div', { attrs: { id: 'storybook-vue-root' } }, children);
+      return h('div', { attrs: { id: 'storybook-root' } }, children);
     },
   });
 
-  return [instance, target];
+  return instance;
 };
 
 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
@@ -97,7 +92,7 @@ export function renderToDOM(
   }: RenderContext<VueFramework>,
   domElement: Element
 ) {
-  const [root, target] = getRoot(domElement);
+  const root = getRoot(domElement);
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
@@ -121,7 +116,7 @@ export function renderToDOM(
   root[VALUES] = { ...element.options[VALUES], ...args };
 
   if (!map.has(domElement)) {
-    root.$mount(target);
+    root.$mount(domElement);
   }
 
   showMain();