fix(compiler): scoped slot with v-else-if not update (fix #12223)

src/compiler/codegen/index.js

@@ -377,11 +377,11 @@ function genScopedSlots (
     )
   })
 
-  // #9534: if a component with scoped slots is inside a conditional branch,
+  // #9534, #12223: if a component with scoped slots is inside a conditional branch,
   // it's possible for the same component to be reused but with different
   // compiled slot content. To avoid that, we generate a unique key based on
   // the generated code of all the slot contents.
-  let needsKey = !!el.if
+  let needsKey = !!(el.if || el.elseif)
 
   // OR when it is inside another scoped slot or v-for (the reactivity may be
   // disconnected due to the intermediate scope variable)

test/unit/features/component/component-scoped-slot.spec.js

@@ -1349,4 +1349,41 @@ describe('Component scoped slot', () => {
       expect(parent.$el.textContent).toMatch(``)
     }).then(done)
   })
+
+  // #12223
+  it('should work with multiple v-else-if', (done) => {
+    const a = 'a'
+    const b = 'b'
+    const c = 'c'
+
+    const vm = new Vue({
+      data: { frame: a },
+      template: `
+        <div>
+            <test v-if="frame === '${a}'">
+                <template #default="x">${a}</template>
+            </test>
+            <test v-else-if="frame === '${b}'">
+                <template #default="x">${b}</template>
+            </test>
+            <test v-else-if="frame === '${c}'">
+                <template #default="x">${c}</template>
+            </test>
+        </div>
+      `,
+      components: {
+        Test: {
+          template: '<div><slot/></div>'
+        }
+      }
+    }).$mount()
+
+    vm.frame = b
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(`<div>${b}</div>`)
+      vm.frame = c
+    }).then(() => {
+      expect(vm.$el.innerHTML).toBe(`<div>${c}</div>`)
+    }).then(done)
+  })
 })