Fix false positives for watch handler methods in vue/no-unused-properties rule (#1255)

Author: ota-meshi

lib/rules/no-unused-properties.js

@@ -583,19 +583,47 @@ module.exports = {
       utils.defineVueVisitor(context, {
         onVueObjectEnter(node) {
           const container = getVueComponentPropertiesContainer(node)
-          const watcherNames = new Set()
+          const watcherUsedProperties = new Set()
           for (const watcher of utils.iterateProperties(
             node,
             new Set([GROUP_WATCHER])
           )) {
+            // Process `watch: { foo /* <- this */ () {} }`
             let path
             for (const seg of watcher.name.split('.')) {
               path = path ? `${path}.${seg}` : seg
-              watcherNames.add(path)
+              watcherUsedProperties.add(path)
+            }
+
+            // Process `watch: { x: 'foo' /* <- this */  }`
+            if (watcher.type === 'object') {
+              const property = watcher.property
+              if (property.kind === 'init') {
+                /** @type {Expression | null} */
+                let handlerValueNode = null
+                if (property.value.type === 'ObjectExpression') {
+                  const handler = utils.findProperty(property.value, 'handler')
+                  if (handler) {
+                    handlerValueNode = handler.value
+                  }
+                } else {
+                  handlerValueNode = property.value
+                }
+                if (
+                  handlerValueNode &&
+                  (handlerValueNode.type === 'Literal' ||
+                    handlerValueNode.type === 'TemplateLiteral')
+                ) {
+                  const name = utils.getStringLiteralValue(handlerValueNode)
+                  if (name != null) {
+                    watcherUsedProperties.add(name)
+                  }
+                }
+              }
             }
           }
           for (const prop of utils.iterateProperties(node, groups)) {
-            if (watcherNames.has(prop.name)) {
+            if (watcherUsedProperties.has(prop.name)) {
               continue
             }
             container.properties.push(prop)

lib/utils/index.js

@@ -83,7 +83,7 @@
 /**
  * @typedef { 'props' | 'data' | 'computed' | 'setup' | 'watch' | 'methods' } GroupName
  * @typedef { { type: 'array',  name: string, groupName: GroupName, node: Literal | TemplateLiteral } } ComponentArrayPropertyData
- * @typedef { { type: 'object', name: string, groupName: GroupName, node: Identifier | Literal | TemplateLiteral } } ComponentObjectPropertyData
+ * @typedef { { type: 'object', name: string, groupName: GroupName, node: Identifier | Literal | TemplateLiteral, property: Property } } ComponentObjectPropertyData
  * @typedef { ComponentArrayPropertyData | ComponentObjectPropertyData } ComponentPropertyData
  */
 /**
@@ -1118,7 +1118,13 @@ module.exports = {
                 continue
               }
             }
-            yield { type: 'object', name, groupName, node: key }
+            yield {
+              type: 'object',
+              name,
+              groupName,
+              node: key,
+              property: item
+            }
           }
         }
       }

tests/lib/rules/no-unused-properties.js

@@ -1031,6 +1031,53 @@ tester.run('no-unused-properties', rule, {
         }
       })
       `
+    },
+    // handlers
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['foo', 'bar'],
+          watch: {
+            foo: 'updateFoo',
+            bar: {
+              handler: 'updateBar',
+              immediate: true
+            }
+          },
+          methods: {
+            updateFoo() {},
+            updateBar() {}
+          }
+        };
+      </script>
+      `,
+      options: [{ groups: ['props', 'methods'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: ['foo', 'bar'],
+          data () {
+            return {
+              updateFoo() {},
+              updateBar() {}
+            }
+          },
+          watch: {
+            foo: 'updateFoo',
+            bar: {
+              handler: 'updateBar',
+              immediate: true
+            }
+          }
+        };
+      </script>
+      `,
+      options: [{ groups: ['props', 'data'] }]
     }
   ],