diff --git a/src/compiler/codegen/index.js b/src/compiler/codegen/index.js
index acb3ca9118c..dd1f4a2153d 100644
--- a/src/compiler/codegen/index.js
+++ b/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)
diff --git a/test/unit/features/component/component-scoped-slot.spec.js b/test/unit/features/component/component-scoped-slot.spec.js
index 8e9d584ae3e..95d301c54fe 100644
--- a/test/unit/features/component/component-scoped-slot.spec.js
+++ b/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)
+  })
 })