check for siblings and refactor checkForKey func

Author: felipemelendez

lib/rules/v-if-else-key.js

@@ -25,6 +25,33 @@ const casing = require('../utils/casing')
  * @property {VElement | null} else - The node associated with the 'v-else' directive, or null if there isn't one.
  */
 
+/**
+ * Checks if a given node has sibling nodes of the same type that are also conditionally rendered.
+ * This is used to determine if multiple instances of the same component are being conditionally
+ * rendered within the same parent scope.
+ *
+ * @param {VElement} node - The Vue component node to check for conditional rendering siblings.
+ * @param {string} componentName - The name of the component to check for sibling instances.
+ * @returns {boolean} True if there are sibling nodes of the same type and conditionally rendered, false otherwise.
+ */
+const hasConditionalRenderedSiblings = (node, componentName) => {
+  if (node.parent && node.parent.type === 'VElement') {
+    const siblings = node.parent.children.filter(
+      (child) => child.type === 'VElement'
+    )
+
+    return siblings.some(
+      (sibling) =>
+        sibling !== node &&
+        sibling.type === 'VElement' &&
+        sibling.rawName === componentName &&
+        hasConditionalDirective(sibling)
+    )
+  }
+
+  return false
+}
+
 /**
  * Checks for the presence of a 'key' attribute in the given node. If the 'key' attribute is missing
  * and the node is part of a conditional family a report is generated.
@@ -44,35 +71,39 @@ const checkForKey = (
   uniqueKey,
   conditionalFamilies
 ) => {
-  if (node.parent && node.parent.type === 'VElement') {
+  if (
+    node.parent &&
+    node.parent.type === 'VElement' &&
+    hasConditionalRenderedSiblings(node, componentName)
+  ) {
     const conditionalFamily = conditionalFamilies.get(node.parent)
 
-    if (
-      conditionalFamily &&
-      (utils.hasDirective(node, 'bind', 'key') ||
-        utils.hasAttribute(node, 'key') ||
-        !hasConditionalDirective(node) ||
-        !(conditionalFamily.else || conditionalFamily.elseIf.length > 0))
-    ) {
-      return
-    }
+    if (conditionalFamily && !utils.hasAttribute(node, 'key')) {
+      let needsKey = false
 
-    context.report({
-      node: node.startTag,
-      loc: node.startTag.loc,
-      messageId: 'requireKey',
-      data: {
-        componentName
-      },
-      fix(fixer) {
-        const afterComponentNamePosition =
-          node.startTag.range[0] + componentName.length + 1
-        return fixer.insertTextBeforeRange(
-          [afterComponentNamePosition, afterComponentNamePosition],
-          ` key="${uniqueKey}"`
-        )
+      if (node === conditionalFamily.if || node === conditionalFamily.else) {
+        needsKey = true
+      } else if (conditionalFamily.elseIf.includes(node)) {
+        needsKey = true
       }
-    })
+
+      if (needsKey) {
+        context.report({
+          node: node.startTag,
+          loc: node.startTag.loc,
+          messageId: 'requireKey',
+          data: { componentName },
+          fix(fixer) {
+            const afterComponentNamePosition =
+              node.startTag.range[0] + componentName.length + 1
+            return fixer.insertTextBeforeRange(
+              [afterComponentNamePosition, afterComponentNamePosition],
+              ` key="${uniqueKey}"`
+            )
+          }
+        })
+      }
+    }
   }
 }