diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
index 35de11686..0513ff4e3 100644
--- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts
+++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts
@@ -12,7 +12,8 @@ import {
SimpleExpressionNode,
ConditionalExpression,
IfConditionalExpression,
- VNodeCall
+ VNodeCall,
+ ElementTypes
} from '../../src/ast'
import { ErrorCodes } from '../../src/errors'
import { CompilerOptions, generate } from '../../src'
@@ -77,6 +78,22 @@ describe('compiler: v-if', () => {
expect(node.branches[0].children[2].type).toBe(NodeTypes.ELEMENT)
expect((node.branches[0].children[2] as ElementNode).tag).toBe(`p`)
})
+
+ test('component v-if', () => {
+ const { node } = parseWithIfTransform(``)
+ expect(node.type).toBe(NodeTypes.IF)
+ expect(node.branches.length).toBe(1)
+ expect((node.branches[0].children[0] as ElementNode).tag).toBe(
+ `Component`
+ )
+ expect((node.branches[0].children[0] as ElementNode).tagType).toBe(
+ ElementTypes.COMPONENT
+ )
+ expect(
+ ((node.branches[0].children[0] as ElementNode)!
+ .codegenNode as VNodeCall)!.isBlock
+ ).toBe(false)
+ })
test('v-if + v-else', () => {
const { node } = parseWithIfTransform(`
`)
diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts
index 5394cb8fd..cb0d6bd38 100644
--- a/packages/compiler-core/src/transforms/vIf.ts
+++ b/packages/compiler-core/src/transforms/vIf.ts
@@ -212,7 +212,12 @@ function createChildrenCodegenNode(
const vnodeCall = (firstChild as ElementNode)
.codegenNode as BlockCodegenNode
// Change createVNode to createBlock.
- if (vnodeCall.type === NodeTypes.VNODE_CALL) {
+ if (
+ vnodeCall.type === NodeTypes.VNODE_CALL &&
+ // component vnodes are always tracked and its children are
+ // compiled into slots so no need to make it a block
+ (firstChild as ElementNode).tagType !== ElementTypes.COMPONENT
+ ) {
vnodeCall.isBlock = true
helper(OPEN_BLOCK)
helper(CREATE_BLOCK)