fix(compiler-vapor): don't mutate ast

packages/compiler-vapor/src/transform.ts

@@ -404,14 +404,8 @@ export function createStructuralDirectiveTransform(
         return
       }
       const exitFns = []
-      for (let i = 0; i < props.length; i++) {
-        const prop = props[i]
+      for (const prop of props) {
         if (prop.type === NodeTypes.DIRECTIVE && matches(prop.name)) {
-          // structural directives are removed to avoid infinite recursion
-          // also we remove them *before* applying so that it can further
-          // traverse itself in case it moves the node around
-          props.splice(i, 1)
-          i--
           const onExit = fn(node, prop as VaporDirectiveNode, context)
           if (onExit) exitFns.push(onExit)
         }

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

@@ -65,16 +65,25 @@ export function createIfBranch(
     node.tagType !== ElementTypes.TEMPLATE
   ) {
     node = extend({}, node, {
+      type: NodeTypes.ELEMENT,
+      tag: 'template',
+      props: [],
       tagType: ElementTypes.TEMPLATE,
-      children: [node],
-    } as TemplateNode)
+      children: [
+        extend({}, node, {
+          props: node.props.filter(
+            (p) => p.type !== NodeTypes.DIRECTIVE && p.name !== 'if',
+          ),
+        } as TemplateChildNode),
+      ],
+    } as Partial<TemplateNode>)
     context.node = node
   }
 
   const branch: BlockFunctionIRNode = {
     type: IRNodeTypes.BLOCK_FUNCTION,
     loc: dir.loc,
-    node: node,
+    node,
     templateIndex: -1,
     dynamic: {
       id: null,