fix(compiler-vapor): prevent v-for components from being single root

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap

@@ -178,6 +178,19 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: element transform > component > v-for on component should not mark as single root 1`] = `
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
+const t0 = _template("<template></template>", true)
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n1 = t0()
+  _setInsertionState(n1)
+  const n0 = _createComponentWithFallback(_component_Comp)
+  return n1
+}"
+`;
+
 exports[`compiler: element transform > component > v-on expression is a function call 1`] = `
 "import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback } from 'vue';
 

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -169,6 +169,16 @@ describe('compiler: element transform', () => {
       expect(code).contains('_createComponent(_ctx.Comp)')
     })
 
+    test('v-for on component should not mark as single root', () => {
+      const { code } = compileWithElementTransform(
+        `<Comp v-for="item in items" :key="item"/>`,
+        {
+          bindingMetadata: { Comp: BindingTypes.SETUP_CONST },
+        },
+      )
+      expect(code).not.contains('_createComponent(_ctx.Comp, null, null, true)')
+    })
+
     test('static props', () => {
       const { code, ir } = compileWithElementTransform(
         `<Foo id="foo" class="bar" />`,

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -123,14 +123,18 @@ function transformComponentElement(
     }
   }
 
+  const hasVFor = node.props.some(
+    p => p.type === NodeTypes.DIRECTIVE && p.name === 'for',
+  )
+
   context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT
   context.dynamic.operation = {
     type: IRNodeTypes.CREATE_COMPONENT_NODE,
     id: context.reference(),
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     asset,
-    root: singleRoot,
+    root: singleRoot && !hasVFor,
     slots: [...context.slots],
     once: context.inVOnce,
     dynamic: dynamicComponent,