From 6f490ab1948b23ac2cb2ed9c7fd703ce310987a5 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Sat, 24 Nov 2018 21:21:52 +0100
Subject: [PATCH 1/4] Add `no-mutating-props` rule.

---
 docs/rules/no-mutating-props.md      |  64 +++++
 lib/rules/no-mutating-props.js       | 170 ++++++++++++++
 lib/utils/index.js                   |   2 +-
 tests/lib/rules/no-mutating-props.js | 333 +++++++++++++++++++++++++++
 tests/lib/utils/index.js             |   4 +-
 5 files changed, 570 insertions(+), 3 deletions(-)
 create mode 100644 docs/rules/no-mutating-props.md
 create mode 100644 lib/rules/no-mutating-props.js
 create mode 100644 tests/lib/rules/no-mutating-props.js

diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
new file mode 100644
index 000000000..7c021a398
--- /dev/null
+++ b/docs/rules/no-mutating-props.md
@@ -0,0 +1,64 @@
+# disallow mutation of component props (vue/no-mutating-props)
+
+This rule reports mutation of component props.
+
+## Rule Details
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+  <div>
+    <input v-model="value" @click="openModal">
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+    methods: {
+      openModal() {
+        this.value = 'test'
+      }
+    }
+  }
+</script>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+  <div>
+    <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+    methods: {
+      openModal() {
+        this.$emit('input', 'test')
+      }
+    }
+  }
+</script>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## Related links
+
+- [Vue - Prop Mutation - deprecated](https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated)
+- [Style guide - Implicit parent-child communication](https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution)
diff --git a/lib/rules/no-mutating-props.js b/lib/rules/no-mutating-props.js
new file mode 100644
index 000000000..726f5abca
--- /dev/null
+++ b/lib/rules/no-mutating-props.js
@@ -0,0 +1,170 @@
+/**
+ * @fileoverview disallow mutation component props
+ * @author 2018 Armano
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow mutation of component props',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/no-mutating-props.md'
+    },
+    fixable: null, // or "code" or "whitespace"
+    schema: [
+      // fill in your schema
+    ]
+  },
+
+  create (context) {
+    let mutatedNodes = []
+    let props = []
+    let scope = {
+      parent: null,
+      nodes: []
+    }
+
+    function checkForMutations () {
+      if (mutatedNodes.length > 0) {
+        for (const prop of props) {
+          for (const node of mutatedNodes) {
+            if (prop === node.name) {
+              context.report({
+                node: node.node,
+                message: 'Unexpected mutation of "{{key}}" prop.',
+                data: {
+                  key: node.name
+                }
+              })
+            }
+          }
+        }
+      }
+      mutatedNodes = []
+    }
+
+    function isInScope (name) {
+      return scope.nodes.some(node => node.name === name)
+    }
+
+    function checkExpression (node, expression) {
+      if (expression[0] === 'this') {
+        mutatedNodes.push({ name: expression[1], node })
+      } else {
+        const name = expression[0]
+        if (!isInScope(name)) {
+          mutatedNodes.push({ name, node })
+        }
+      }
+    }
+
+    function checkTemplateProperty (node) {
+      if (node.type === 'MemberExpression') {
+        checkExpression(node, utils.parseMemberExpression(node))
+      } else if (node.type === 'Identifier') {
+        if (!isInScope(node.name)) {
+          mutatedNodes.push({
+            name: node.name,
+            node
+          })
+        }
+      }
+    }
+
+    return Object.assign({},
+      {
+        // this.xxx <=|+=|-=>
+        'AssignmentExpression' (node) {
+          if (node.left.type !== 'MemberExpression') return
+          const expression = utils.parseMemberExpression(node.left)
+          if (expression[0] === 'this') {
+            mutatedNodes.push({
+              name: expression[1],
+              node
+            })
+          }
+        },
+        // this.xxx <++|-->
+        'UpdateExpression > MemberExpression' (node) {
+          const expression = utils.parseMemberExpression(node)
+          if (expression[0] === 'this') {
+            mutatedNodes.push({
+              name: expression[1],
+              node
+            })
+          }
+        },
+        // this.xxx.func()
+        'CallExpression' (node) {
+          const expression = utils.parseMemberOrCallExpression(node)
+          const code = expression.join('.').replace(/\.\[/g, '[')
+          const MUTATION_REGEX = /(this.)((?!(concat|slice|map|filter)\().)[^\)]*((push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)\()/g
+
+          if (MUTATION_REGEX.test(code)) {
+            if (expression[0] === 'this') {
+              mutatedNodes.push({
+                name: expression[1],
+                node
+              })
+            }
+          }
+        }
+      },
+      utils.executeOnVue(context, (obj) => {
+        props = utils.getComponentProps(obj)
+          .filter(cp => cp.key)
+          .map(cp => utils.getStaticPropertyName(cp.key))
+        checkForMutations()
+      }),
+
+      utils.defineTemplateBodyVisitor(context, {
+        VElement (node) {
+          scope = {
+            parent: scope,
+            nodes: scope.nodes.slice() // make copy
+          }
+
+          if (node.variables) {
+            for (const variable of node.variables) {
+              scope.nodes.push(variable.id)
+            }
+          }
+        },
+        'VElement:exit' () {
+          scope = scope.parent
+        },
+        'VExpressionContainer AssignmentExpression' (node) {
+          checkTemplateProperty(node.left)
+        },
+        // this.xxx <++|-->
+        'VExpressionContainer UpdateExpression' (node) {
+          checkTemplateProperty(node.argument)
+        },
+        // this.xxx.func()
+        'VExpressionContainer CallExpression' (node) {
+          const expression = utils.parseMemberOrCallExpression(node)
+          const code = expression.join('.').replace(/\.\[/g, '[')
+          const MUTATION_REGEX = /(this.)?((?!(concat|slice|map|filter)\().)[^\)]*((push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)\()/g
+
+          if (MUTATION_REGEX.test(code)) {
+            checkExpression(node, expression)
+          }
+        },
+        "VAttribute[directive=true][key.name='model'] VExpressionContainer" (node) {
+          checkTemplateProperty(node.expression)
+        },
+        "VElement[name='template']:exit" () {
+          checkForMutations()
+        }
+      })
+    )
+  }
+}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index c31ed0e6e..1b7072989 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -847,7 +847,7 @@ module.exports = {
       parsedCallee.push('this')
     }
 
-    return parsedCallee.reverse().join('.').replace(/\.\[/g, '[')
+    return parsedCallee.reverse()
   },
 
   /**
diff --git a/tests/lib/rules/no-mutating-props.js b/tests/lib/rules/no-mutating-props.js
new file mode 100644
index 000000000..3b141d6c3
--- /dev/null
+++ b/tests/lib/rules/no-mutating-props.js
@@ -0,0 +1,333 @@
+/**
+ * @fileoverview disallow mutation of component props
+ * @author 2018 Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-mutating-props')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  }
+})
+
+ruleTester.run('no-mutating-props', rule, {
+
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="foo"></div>
+            <div v-if="prop1 = [1, 2]"></div>
+            <div v-if="prop2++"></div>
+            <div v-text="prop3.shift()"></div>
+            <div v-text="prop4.slice(0).shift()"></div>
+            <div v-if="this.prop5 = [1, 2] && this.someProp"></div>
+            <div v-if="this.prop6++ && this.someProp < 10"></div>
+            <div v-text="this.prop7.shift()"></div>
+            <div v-text="this.prop8.slice(0).shift()"></div>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['foo']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+            <input :value="prop5.text" @input="$emit('input', $event.target.value)">
+            <div v-for="prop5 of data">
+              <input v-model="prop5">
+            </div>
+            <div v-for="(prop6, index) of data">
+              <input v-model="prop6">
+            </div>
+            <template v-for="(test, index) of data">
+              <template v-for="(prop6, index) of data">
+                <input v-model="prop6">
+                <div v-text="prop6.shift()"></div>
+              </template>
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-for="i in prop.slice()">
+            <input v-for="i in prop.foo.slice()">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              todo: {
+                type: Object,
+                required: true
+              },
+              items: {
+                type: Array,
+                default: []
+              }
+            },
+            methods: {
+              openModal() {
+                this.$emit('someEvent', this.todo)
+                const a = this.items.slice(0).push('something') // no mutation because of \`slice(0)\`
+              }
+            }
+          }
+        </script>
+      `
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <div v-if="prop1 = [1, 2]"></div>
+            <div v-if="prop2++"></div>
+            <div v-text="prop3.shift()"></div>
+            <div v-text="prop4.slice(0).shift()"></div>
+            <div v-if="this.prop5 = [1, 2] && this.someProp"></div>
+            <div v-if="this.prop6++ && this.someProp < 10"></div>
+            <div v-text="this.prop7.shift()"></div>
+            <div v-text="this.prop8.slice(0).shift()"></div>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop3" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "prop4" prop.',
+          line: 7
+        },
+        {
+          message: 'Unexpected mutation of "prop5" prop.',
+          line: 8
+        },
+        {
+          message: 'Unexpected mutation of "prop6" prop.',
+          line: 9
+        },
+        {
+          message: 'Unexpected mutation of "prop7" prop.',
+          line: 10
+        },
+        {
+          message: 'Unexpected mutation of "prop8" prop.',
+          line: 11
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <input v-model="prop1.text">
+            <input v-model="prop2">
+            <input v-model="this.prop3.text">
+            <input v-model="this.prop4">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop1', 'prop2', 'prop3', 'prop4']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop1" prop.',
+          line: 4
+        },
+        {
+          message: 'Unexpected mutation of "prop2" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop3" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "prop4" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            props: {
+              todo: {
+                type: Object,
+                required: true
+              },
+              items: {
+                type: Array,
+                default: []
+              }
+            },
+            methods: {
+              openModal() {
+                ++this.items
+                this.todo.type = 'completed'
+                this.items.push('something')
+              }
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "items" prop.',
+          line: 16
+        },
+        {
+          message: 'Unexpected mutation of "todo" prop.',
+          line: 17
+        },
+        {
+          message: 'Unexpected mutation of "items" prop.',
+          line: 18
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <template v-for="(test, index) of data">
+              <template v-for="(prop, index) of data">
+                <input v-model="prop">
+              </template>
+              <input v-model="prop">
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 8
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <template v-for="prop of data">
+              <input v-model="this.prop">
+              <div v-text="prop.shift()"></div>
+              <div v-text="this.prop.shift()"></div>
+            </template>
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop']
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "prop" prop.',
+          line: 7
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index f698a98ef..b64a31425 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -199,13 +199,13 @@ describe('parseMemberOrCallExpression', () => {
   it('should parse CallExpression', () => {
     node = parse(`const test = this.lorem['ipsum'].map(d => d.id).filter((a, b) => a > b).reduce((acc, d) => acc + d, 0)`)
     const parsed = utils.parseMemberOrCallExpression(node)
-    assert.equal(parsed, 'this.lorem[].map().filter().reduce()')
+    assert.deepEqual(parsed, ['this', 'lorem', '[]', 'map()', 'filter()', 'reduce()'])
   })
 
   it('should parse MemberExpression', () => {
     node = parse(`const test = this.lorem['ipsum'][0].map(d => d.id).dolor.reduce((acc, d) => acc + d, 0).sit`)
     const parsed = utils.parseMemberOrCallExpression(node)
-    assert.equal(parsed, 'this.lorem[][].map().dolor.reduce().sit')
+    assert.deepEqual(parsed, ['this', 'lorem', '[]', '[]', 'map()', 'dolor', 'reduce()', 'sit'])
   })
 })
 

From e768ecd259c11e5dcd9c99e51bc67002e49e10ca Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Wed, 20 May 2020 17:59:08 +0900
Subject: [PATCH 2/4] update

---
 docs/rules/README.md                 |   1 +
 docs/rules/no-mutating-props.md      |  34 ++-
 lib/index.js                         |   1 +
 lib/rules/no-mutating-props.js       | 319 +++++++++++++++++----------
 lib/utils/index.js                   |  23 ++
 tests/lib/rules/no-mutating-props.js |  54 ++++-
 6 files changed, 304 insertions(+), 128 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 83eda5692..58b176f65 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -284,6 +284,7 @@ For example:
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace |  |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax |  |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
index 7c021a398..38a0df14e 100644
--- a/docs/rules/no-mutating-props.md
+++ b/docs/rules/no-mutating-props.md
@@ -1,12 +1,20 @@
-# disallow mutation of component props (vue/no-mutating-props)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-mutating-props
+description: disallow mutation of component props
+---
+# vue/no-mutating-props
+> disallow mutation of component props
 
-This rule reports mutation of component props.
+## :book: Rule Details
 
-## Rule Details
+This rule reports mutation of component props.
 
-:-1: Examples of **incorrect** code for this rule:
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
 
-```html
+```vue
+<!-- ✗ BAD -->
 <template>
   <div>
     <input v-model="value" @click="openModal">
@@ -29,9 +37,12 @@ This rule reports mutation of component props.
 </script>
 ```
 
-:+1: Examples of **correct** code for this rule:
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
 
-```html
+```vue
+<!-- ✓ GOOD -->
 <template>
   <div>
     <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
@@ -54,11 +65,18 @@ This rule reports mutation of component props.
 </script>
 ```
 
+</eslint-code-block>
+
 ## :wrench: Options
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Vue - Prop Mutation - deprecated](https://vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated)
 - [Style guide - Implicit parent-child communication](https://vuejs.org/v2/style-guide/#Implicit-parent-child-communication-use-with-caution)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-mutating-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-mutating-props.js)
diff --git a/lib/index.js b/lib/index.js
index 6adbbecd4..1c45443ca 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -64,6 +64,7 @@ module.exports = {
     'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
     'no-multiple-template-root': require('./rules/no-multiple-template-root'),
+    'no-mutating-props': require('./rules/no-mutating-props'),
     'no-parsing-error': require('./rules/no-parsing-error'),
     'no-ref-as-operand': require('./rules/no-ref-as-operand'),
     'no-reserved-component-names': require('./rules/no-reserved-component-names'),
diff --git a/lib/rules/no-mutating-props.js b/lib/rules/no-mutating-props.js
index 726f5abca..aab5d34a5 100644
--- a/lib/rules/no-mutating-props.js
+++ b/lib/rules/no-mutating-props.js
@@ -6,6 +6,16 @@
 
 const utils = require('../utils')
 
+/**
+ * @typedef {import('vue-eslint-parser').AST.ESLintObjectExpression} ObjectExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintMemberExpression} MemberExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintCallExpression} CallExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintIdentifier} Identifier
+ * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
+ * @typedef {import('vue-eslint-parser').AST.Node} Node
+ * @typedef {import('vue-eslint-parser').AST.ESLintExpression} Expression
+ */
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -15,8 +25,8 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'disallow mutation of component props',
-      category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/no-mutating-props.md'
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/no-mutating-props.html'
     },
     fixable: null, // or "code" or "whitespace"
     schema: [
@@ -25,144 +35,231 @@ module.exports = {
   },
 
   create (context) {
-    let mutatedNodes = []
-    let props = []
-    let scope = {
-      parent: null,
-      nodes: []
+    /** @type {Map<ObjectExpression, Set<string>>} */
+    const propsMap = new Map()
+    /** @type { { type: 'export' | 'mark' | 'definition', object: ObjectExpression } | null } */
+    let vueObjectData = null
+
+    function report (node, name) {
+      context.report({
+        node,
+        message: 'Unexpected mutation of "{{key}}" prop.',
+        data: {
+          key: name
+        }
+      })
     }
 
-    function checkForMutations () {
-      if (mutatedNodes.length > 0) {
-        for (const prop of props) {
-          for (const node of mutatedNodes) {
-            if (prop === node.name) {
-              context.report({
-                node: node.node,
-                message: 'Unexpected mutation of "{{key}}" prop.',
-                data: {
-                  key: node.name
-                }
-              })
-            }
-          }
+    function isThis (node, template) {
+      if (!template) {
+        return utils.isThis(node, context)
+      } else {
+        return node.type === 'ThisExpression'
+      }
+    }
+    /**
+     * @param {MemberExpression} node
+     * @param {ObjectExpression} vueNode
+     * @param {boolean} template
+     */
+    function verifyMember (node, vueNode, template) {
+      /** @type {MemberExpression} */
+      let mem = node
+      while (mem.object.type === 'MemberExpression') {
+        mem = mem.object
+      }
+      let name
+      if (isThis(mem.object, template)) {
+        name = utils.getStaticPropertyName(mem)
+      } else if (template && isVmReference(mem.object)) {
+        name = mem.object.name
+      } else {
+        return
+      }
+
+      if (name && propsMap.get(vueNode).has(name)) {
+        report(node, name)
+      }
+    }
+    /**
+     * @param {CallExpression} node
+     * @param {ObjectExpression} vueNode
+     * @param {boolean} template
+     */
+    function verifyCall (node, vueNode, template) {
+      const nodes = utils.getMemberOrCallChaining(node)
+      if (nodes.length < 3) {
+        return
+      } else if (!template && nodes.length < 4) {
+        return
+      }
+      let name
+      const first = nodes.shift()
+      if (isThis(first, template)) {
+        const propMem = nodes.shift()
+        if (propMem.type !== 'MemberExpression') {
+          return
         }
+        name = utils.getStaticPropertyName(propMem)
+      } else if (template && isVmReference(first)) {
+        name = first.name
+      } else {
+        return
+      }
+      if (!name || !propsMap.get(vueNode).has(name) || nodes.length < 2) {
+        return
+      }
+      const call = nodes.pop()
+      const fnMem = nodes.pop()
+      if (
+        fnMem.type !== 'MemberExpression' ||
+        call !== node
+      ) {
+        return
+      }
+      const callName = utils.getStaticPropertyName(fnMem)
+      if (!callName || !/^push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill$/u.exec(callName)) {
+        return
+      }
+
+      if (nodes.some(n => n.type !== 'MemberExpression')) {
+        return
+      }
+
+      report(node, name)
+    }
+    /**
+     * @param {Identifier} node
+     * @param {ObjectExpression} vueNode
+     */
+    function verifyIdInTemplate (node, vueNode) {
+      if (!isVmReference(node)) {
+        return
+      }
+      const name = node.name
+      if (name && propsMap.get(vueNode).has(name)) {
+        report(node, name)
       }
-      mutatedNodes = []
     }
 
-    function isInScope (name) {
-      return scope.nodes.some(node => node.name === name)
+    /**
+     * @param {Expression} node
+     * @param {ObjectExpression} vueNode
+     */
+    function verifyVModelExpr (node, vueNode) {
+      if (node.type === 'Identifier') {
+        verifyIdInTemplate(node, vueNode)
+      } else if (node.type === 'MemberExpression') {
+        verifyMember(node, vueNode, true)
+      }
     }
 
-    function checkExpression (node, expression) {
-      if (expression[0] === 'this') {
-        mutatedNodes.push({ name: expression[1], node })
-      } else {
-        const name = expression[0]
-        if (!isInScope(name)) {
-          mutatedNodes.push({ name, node })
-        }
+    /**
+     * @param {Node} node
+     * @returns {VExpressionContainer}
+     */
+    function getVExpressionContainer (node) {
+      let n = node
+      while (n.type !== 'VExpressionContainer') {
+        n = n.parent
       }
+      return n
     }
+    /**
+     * @param {Node} node
+     * @returns {node is Identifier}
+     */
+    function isVmReference (node) {
+      if (node.type !== 'Identifier') {
+        return false
+      }
+      const exprContainer = getVExpressionContainer(node)
 
-    function checkTemplateProperty (node) {
-      if (node.type === 'MemberExpression') {
-        checkExpression(node, utils.parseMemberExpression(node))
-      } else if (node.type === 'Identifier') {
-        if (!isInScope(node.name)) {
-          mutatedNodes.push({
-            name: node.name,
-            node
-          })
+      for (const reference of exprContainer.references) {
+        if (reference.variable != null) {
+          // Not vm reference
+          continue
+        }
+        if (reference.id === node) {
+          return true
         }
       }
+      return false
     }
 
     return Object.assign({},
-      {
-        // this.xxx <=|+=|-=>
-        'AssignmentExpression' (node) {
-          if (node.left.type !== 'MemberExpression') return
-          const expression = utils.parseMemberExpression(node.left)
-          if (expression[0] === 'this') {
-            mutatedNodes.push({
-              name: expression[1],
-              node
-            })
-          }
-        },
-        // this.xxx <++|-->
-        'UpdateExpression > MemberExpression' (node) {
-          const expression = utils.parseMemberExpression(node)
-          if (expression[0] === 'this') {
-            mutatedNodes.push({
-              name: expression[1],
-              node
-            })
-          }
-        },
-        // this.xxx.func()
-        'CallExpression' (node) {
-          const expression = utils.parseMemberOrCallExpression(node)
-          const code = expression.join('.').replace(/\.\[/g, '[')
-          const MUTATION_REGEX = /(this.)((?!(concat|slice|map|filter)\().)[^\)]*((push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)\()/g
-
-          if (MUTATION_REGEX.test(code)) {
-            if (expression[0] === 'this') {
-              mutatedNodes.push({
-                name: expression[1],
-                node
-              })
+      utils.defineVueVisitor(context,
+        {
+          ObjectExpression (node, { node: vueNode }) {
+            if (node !== vueNode) {
+              return
+            }
+            propsMap.set(node, new Set(utils.getComponentProps(node).map(p => p.propName)))
+          },
+          'ObjectExpression:exit' (node, { node: vueNode, type }) {
+            if (node !== vueNode) {
+              return
+            }
+            if (!vueObjectData || vueObjectData.type !== 'export') {
+              vueObjectData = {
+                type,
+                object: node
+              }
             }
+          },
+          // this.xxx <=|+=|-=>
+          'AssignmentExpression' (node, { node: vueNode }) {
+            if (node.left.type !== 'MemberExpression') {
+              return
+            }
+            verifyMember(node.left, vueNode, false)
+          },
+          // this.xxx <++|-->
+          'UpdateExpression > MemberExpression' (node, { node: vueNode }) {
+            verifyMember(node, vueNode, false)
+          },
+          // this.xxx.func()
+          'CallExpression' (node, { node: vueNode }) {
+            verifyCall(node, vueNode, false)
           }
         }
-      },
-      utils.executeOnVue(context, (obj) => {
-        props = utils.getComponentProps(obj)
-          .filter(cp => cp.key)
-          .map(cp => utils.getStaticPropertyName(cp.key))
-        checkForMutations()
-      }),
-
+      ),
       utils.defineTemplateBodyVisitor(context, {
-        VElement (node) {
-          scope = {
-            parent: scope,
-            nodes: scope.nodes.slice() // make copy
+        // this.xxx <=|+=|-=>
+        'VExpressionContainer AssignmentExpression' (node) {
+          if (!vueObjectData) {
+            return
           }
-
-          if (node.variables) {
-            for (const variable of node.variables) {
-              scope.nodes.push(variable.id)
-            }
+          if (node.left.type === 'Identifier') {
+            verifyIdInTemplate(node.left, vueObjectData.object)
+          } else if (node.left.type === 'MemberExpression') {
+            verifyMember(node.left, vueObjectData.object, true)
           }
         },
-        'VElement:exit' () {
-          scope = scope.parent
-        },
-        'VExpressionContainer AssignmentExpression' (node) {
-          checkTemplateProperty(node.left)
-        },
         // this.xxx <++|-->
-        'VExpressionContainer UpdateExpression' (node) {
-          checkTemplateProperty(node.argument)
+        'VExpressionContainer UpdateExpression > :matches(Identifier, MemberExpression)' (node) {
+          if (!vueObjectData) {
+            return
+          }
+          if (node.type === 'Identifier') {
+            verifyIdInTemplate(node, vueObjectData.object)
+          } else {
+            // node.type === 'MemberExpression'
+            verifyMember(node, vueObjectData.object, true)
+          }
         },
         // this.xxx.func()
         'VExpressionContainer CallExpression' (node) {
-          const expression = utils.parseMemberOrCallExpression(node)
-          const code = expression.join('.').replace(/\.\[/g, '[')
-          const MUTATION_REGEX = /(this.)?((?!(concat|slice|map|filter)\().)[^\)]*((push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill)\()/g
-
-          if (MUTATION_REGEX.test(code)) {
-            checkExpression(node, expression)
+          if (!vueObjectData) {
+            return
           }
+          verifyCall(node, vueObjectData.object, true)
         },
-        "VAttribute[directive=true][key.name='model'] VExpressionContainer" (node) {
-          checkTemplateProperty(node.expression)
-        },
-        "VElement[name='template']:exit" () {
-          checkForMutations()
+        "VAttribute[directive=true][key.name.name='model'] VExpressionContainer > *" (node) {
+          if (!vueObjectData) {
+            return
+          }
+          verifyVModelExpr(node, vueObjectData.object)
         }
       })
     )
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 1b7072989..c894c0160 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -15,6 +15,7 @@
  * @typedef {import('vue-eslint-parser').AST.ESLintObjectExpression} ObjectExpression
  * @typedef {import('vue-eslint-parser').AST.ESLintProperty} Property
  * @typedef {import('vue-eslint-parser').AST.ESLintTemplateLiteral} TemplateLiteral
+ * @typedef {import('vue-eslint-parser').AST.ESLintNode} ESLintNode
  */
 
 /**
@@ -813,6 +814,28 @@ module.exports = {
     return body.errors.some(error => typeof error.code === 'string' && error.code.startsWith('eof-'))
   },
 
+  /**
+   * Get the chaining nodes of CallExpression or MemberExpression.
+   *
+   * @param  {ESLintNode} node The node to parse (MemberExpression | CallExpression)
+   * @return {ESLintNode[]} The chaining nodes
+   */
+  getMemberOrCallChaining (node) {
+    const nodes = []
+    let n = node
+
+    while (n.type === 'MemberExpression' || n.type === 'CallExpression') {
+      nodes.push(n)
+      if (n.type === 'CallExpression') {
+        n = n.callee
+      } else {
+        n = n.object
+      }
+    }
+    nodes.push(n)
+
+    return nodes.reverse()
+  },
   /**
    * Parse CallExpression or MemberExpression to get simplified version without arguments
    *
diff --git a/tests/lib/rules/no-mutating-props.js b/tests/lib/rules/no-mutating-props.js
index 3b141d6c3..d4928863c 100644
--- a/tests/lib/rules/no-mutating-props.js
+++ b/tests/lib/rules/no-mutating-props.js
@@ -16,7 +16,7 @@ const RuleTester = require('eslint').RuleTester
 // ------------------------------------------------------------------------------
 
 const ruleTester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
@@ -138,6 +138,50 @@ ruleTester.run('no-mutating-props', rule, {
           }
         </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div v-if="prop">
+            <div v-for="prop in data">
+              <MyComp @click="prop.foo++"></MyComp>
+              <input v-model="prop">
+            </div>
+            <input v-model="prop()">
+            <input v-model="foo">
+            <input @click="prop().foo++">
+          </div>
+        </template>
+        <script>
+          export default {
+            props: ['prop'],
+            methods: {
+              onKeydown() {
+                const vm = this
+                foo.prop = 1
+                vm()()()
+                vm.prop()()
+                prop++
+                prop = 1
+              }
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <div>
+            <button @click="foo++"></button>
+            <button @click="foo+=1"></button>
+            <button @click="foo.push($event)"></button>
+            <input v-model="foo">
+          </div>
+        </template>
+      `
     }
   ],
 
@@ -176,10 +220,6 @@ ruleTester.run('no-mutating-props', rule, {
           message: 'Unexpected mutation of "prop3" prop.',
           line: 6
         },
-        {
-          message: 'Unexpected mutation of "prop4" prop.',
-          line: 7
-        },
         {
           message: 'Unexpected mutation of "prop5" prop.',
           line: 8
@@ -191,10 +231,6 @@ ruleTester.run('no-mutating-props', rule, {
         {
           message: 'Unexpected mutation of "prop7" prop.',
           line: 10
-        },
-        {
-          message: 'Unexpected mutation of "prop8" prop.',
-          line: 11
         }
       ]
     },

From 0b6959c6bf89f117a6d9487f20f4a80a8d84ba9a Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Thu, 21 May 2020 11:19:08 +0900
Subject: [PATCH 3/4] support vue3

---
 docs/rules/README.md                 |   3 +-
 docs/rules/no-mutating-props.md      |  17 ++
 lib/configs/essential.js             |   1 +
 lib/configs/vue3-essential.js        |   1 +
 lib/rules/no-mutating-props.js       | 368 +++++++++++++++++----------
 lib/utils/index.js                   |  20 +-
 tests/lib/rules/no-mutating-props.js | 273 +++++++++++++++++++-
 tests/lib/utils/index.js             |   4 +-
 8 files changed, 545 insertions(+), 142 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 58b176f65..92aa47219 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -56,6 +56,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
 | [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
@@ -162,6 +163,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
 | [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
 | [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
 | [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
 | [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
@@ -284,7 +286,6 @@ For example:
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace |  |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax |  |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
index 38a0df14e..2d0833333 100644
--- a/docs/rules/no-mutating-props.md
+++ b/docs/rules/no-mutating-props.md
@@ -7,6 +7,8 @@ description: disallow mutation of component props
 # vue/no-mutating-props
 > disallow mutation of component props
 
+- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
+
 ## :book: Rule Details
 
 This rule reports mutation of component props.
@@ -67,6 +69,21 @@ This rule reports mutation of component props.
 
 </eslint-code-block>
 
+<eslint-code-block :rules="{'vue/no-mutating-props': ['error']}">
+
+```vue
+<script>
+  export default {
+    setup (props) {
+      // ✗ BAD
+      props.value = 'test'
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
 ## :wrench: Options
 
 Nothing.
diff --git a/lib/configs/essential.js b/lib/configs/essential.js
index 21335f197..f85195de1 100644
--- a/lib/configs/essential.js
+++ b/lib/configs/essential.js
@@ -11,6 +11,7 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-multiple-template-root': 'error',
+    'vue/no-mutating-props': 'error',
     'vue/no-parsing-error': 'error',
     'vue/no-reserved-keys': 'error',
     'vue/no-shared-component-data': 'error',
diff --git a/lib/configs/vue3-essential.js b/lib/configs/vue3-essential.js
index 64d5eb72e..c8e630496 100644
--- a/lib/configs/vue3-essential.js
+++ b/lib/configs/vue3-essential.js
@@ -24,6 +24,7 @@ module.exports = {
     'vue/no-dupe-keys': 'error',
     'vue/no-duplicate-attributes': 'error',
     'vue/no-lifecycle-after-await': 'error',
+    'vue/no-mutating-props': 'error',
     'vue/no-parsing-error': 'error',
     'vue/no-ref-as-operand': 'error',
     'vue/no-reserved-keys': 'error',
diff --git a/lib/rules/no-mutating-props.js b/lib/rules/no-mutating-props.js
index aab5d34a5..90e614b48 100644
--- a/lib/rules/no-mutating-props.js
+++ b/lib/rules/no-mutating-props.js
@@ -5,15 +5,18 @@
 'use strict'
 
 const utils = require('../utils')
+const { findVariable } = require('eslint-utils')
 
 /**
  * @typedef {import('vue-eslint-parser').AST.ESLintObjectExpression} ObjectExpression
  * @typedef {import('vue-eslint-parser').AST.ESLintMemberExpression} MemberExpression
- * @typedef {import('vue-eslint-parser').AST.ESLintCallExpression} CallExpression
+ * @typedef {import('vue-eslint-parser').AST.ESLintProperty} Property
  * @typedef {import('vue-eslint-parser').AST.ESLintIdentifier} Identifier
  * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
+ * @typedef {import('vue-eslint-parser').AST.ESLintObjectPattern} ObjectPattern
+ * @typedef {import('vue-eslint-parser').AST.ESLintArrayPattern} ArrayPattern
+ * @typedef {import('vue-eslint-parser').AST.ESLintPattern} Pattern
  * @typedef {import('vue-eslint-parser').AST.Node} Node
- * @typedef {import('vue-eslint-parser').AST.ESLintExpression} Expression
  */
 
 // ------------------------------------------------------------------------------
@@ -25,7 +28,7 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'disallow mutation of component props',
-      categories: undefined,
+      categories: ['vue3-essential', 'essential'],
       url: 'https://eslint.vuejs.org/rules/no-mutating-props.html'
     },
     fixable: null, // or "code" or "whitespace"
@@ -40,6 +43,10 @@ module.exports = {
     /** @type { { type: 'export' | 'mark' | 'definition', object: ObjectExpression } | null } */
     let vueObjectData = null
 
+    /**
+     * @param {Node} node
+     * @param {string} name
+     */
     function report (node, name) {
       context.report({
         node,
@@ -50,141 +57,164 @@ module.exports = {
       })
     }
 
-    function isThis (node, template) {
-      if (!template) {
-        return utils.isThis(node, context)
-      } else {
-        return node.type === 'ThisExpression'
+    /**
+     * @param {Node} node
+     * @returns {VExpressionContainer}
+     */
+    function getVExpressionContainer (node) {
+      let n = node
+      while (n.type !== 'VExpressionContainer') {
+        n = n.parent
       }
+      return n
     }
     /**
-     * @param {MemberExpression} node
-     * @param {ObjectExpression} vueNode
-     * @param {boolean} template
+     * @param {MemberExpression|Property} node
+     * @returns {string}
      */
-    function verifyMember (node, vueNode, template) {
-      /** @type {MemberExpression} */
-      let mem = node
-      while (mem.object.type === 'MemberExpression') {
-        mem = mem.object
+    function getPropertyNameText (node) {
+      const name = utils.getStaticPropertyName(node)
+      if (name) {
+        return name
       }
-      let name
-      if (isThis(mem.object, template)) {
-        name = utils.getStaticPropertyName(mem)
-      } else if (template && isVmReference(mem.object)) {
-        name = mem.object.name
-      } else {
-        return
-      }
-
-      if (name && propsMap.get(vueNode).has(name)) {
-        report(node, name)
+      if (node.computed) {
+        const expr = node.type === 'Property' ? node.key : node.property
+        const str = context.getSourceCode().getText(expr)
+        return `[${str}]`
       }
+      return '?unknown?'
     }
     /**
-     * @param {CallExpression} node
-     * @param {ObjectExpression} vueNode
-     * @param {boolean} template
+     * @param {Node} node
+     * @returns {node is Identifier}
      */
-    function verifyCall (node, vueNode, template) {
-      const nodes = utils.getMemberOrCallChaining(node)
-      if (nodes.length < 3) {
-        return
-      } else if (!template && nodes.length < 4) {
-        return
+    function isVmReference (node) {
+      if (node.type !== 'Identifier') {
+        return false
       }
-      let name
-      const first = nodes.shift()
-      if (isThis(first, template)) {
-        const propMem = nodes.shift()
-        if (propMem.type !== 'MemberExpression') {
-          return
+      const parent = node.parent
+      if (parent.type === 'MemberExpression') {
+        if (parent.property === node) {
+          // foo.id
+          return false
+        }
+      } else if (parent.type === 'Property') {
+        // {id: foo}
+        if (parent.key === node && !parent.computed) {
+          return false
         }
-        name = utils.getStaticPropertyName(propMem)
-      } else if (template && isVmReference(first)) {
-        name = first.name
-      } else {
-        return
-      }
-      if (!name || !propsMap.get(vueNode).has(name) || nodes.length < 2) {
-        return
-      }
-      const call = nodes.pop()
-      const fnMem = nodes.pop()
-      if (
-        fnMem.type !== 'MemberExpression' ||
-        call !== node
-      ) {
-        return
-      }
-      const callName = utils.getStaticPropertyName(fnMem)
-      if (!callName || !/^push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill$/u.exec(callName)) {
-        return
       }
 
-      if (nodes.some(n => n.type !== 'MemberExpression')) {
-        return
-      }
+      const exprContainer = getVExpressionContainer(node)
 
-      report(node, name)
-    }
-    /**
-     * @param {Identifier} node
-     * @param {ObjectExpression} vueNode
-     */
-    function verifyIdInTemplate (node, vueNode) {
-      if (!isVmReference(node)) {
-        return
-      }
-      const name = node.name
-      if (name && propsMap.get(vueNode).has(name)) {
-        report(node, name)
+      for (const reference of exprContainer.references) {
+        if (reference.variable != null) {
+          // Not vm reference
+          continue
+        }
+        if (reference.id === node) {
+          return true
+        }
       }
+      return false
     }
 
     /**
-     * @param {Expression} node
-     * @param {ObjectExpression} vueNode
+     * @param {MemberExpression|Identifier} props
+     * @param {string} name
      */
-    function verifyVModelExpr (node, vueNode) {
-      if (node.type === 'Identifier') {
-        verifyIdInTemplate(node, vueNode)
-      } else if (node.type === 'MemberExpression') {
-        verifyMember(node, vueNode, true)
+    function verifyMutating (props, name) {
+      const invalid = findMutating(props)
+      if (invalid) {
+        report(invalid.node, name)
       }
     }
 
     /**
-     * @param {Node} node
-     * @returns {VExpressionContainer}
+     * @param {MemberExpression|Identifier} props
+     * @returns { { kind: 'assignment' | 'update' | 'call' , node: Node, pathNodes: MemberExpression[] } }
      */
-    function getVExpressionContainer (node) {
-      let n = node
-      while (n.type !== 'VExpressionContainer') {
-        n = n.parent
+    function findMutating (props) {
+      /** @type {MemberExpression[]} */
+      const pathNodes = []
+      let node = props
+      let target = node.parent
+      while (true) {
+        if (target.type === 'AssignmentExpression') {
+          if (target.left === node) {
+            // this.xxx <=|+=|-=>
+            return {
+              kind: 'assignment',
+              node: target,
+              pathNodes
+            }
+          }
+        } else if (target.type === 'UpdateExpression') {
+          // this.xxx <++|-->
+          return {
+            kind: 'update',
+            node: target,
+            pathNodes
+          }
+        } else if (target.type === 'CallExpression') {
+          if (node !== props && target.callee === node) {
+            const callName = utils.getStaticPropertyName(node)
+            if (callName && /^push|pop|shift|unshift|reverse|splice|sort|copyWithin|fill$/u.exec(callName)) {
+              // this.xxx.push()
+              pathNodes.pop()
+              return {
+                kind: 'call',
+                node: target,
+                pathNodes
+              }
+            }
+          }
+        } else if (target.type === 'MemberExpression') {
+          if (target.object === node) {
+            pathNodes.push(target)
+            node = target
+            target = target.parent
+            continue // loop
+          }
+        }
+
+        return null
       }
-      return n
     }
+
     /**
-     * @param {Node} node
-     * @returns {node is Identifier}
+     * @param {Pattern} param
+     * @param {string[]} path
+     * @returns {Generator<{ node: Identifier, path: string[] }>}
      */
-    function isVmReference (node) {
-      if (node.type !== 'Identifier') {
-        return false
+    function * iterateParamProperties (param, path) {
+      if (!param) {
+        return
       }
-      const exprContainer = getVExpressionContainer(node)
-
-      for (const reference of exprContainer.references) {
-        if (reference.variable != null) {
-          // Not vm reference
-          continue
+      if (param.type === 'Identifier') {
+        yield {
+          node: param,
+          path
         }
-        if (reference.id === node) {
-          return true
+      } else if (param.type === 'RestElement') {
+        yield * iterateParamProperties(param.argument, path)
+      } else if (param.type === 'AssignmentPattern') {
+        yield * iterateParamProperties(param.left, path)
+      } else if (param.type === 'ObjectPattern') {
+        for (const prop of param.properties) {
+          if (prop.type === 'Property') {
+            const name = getPropertyNameText(prop)
+            yield * iterateParamProperties(prop.value, [...path, name])
+          } else if (prop.type === 'RestElement') {
+            yield * iterateParamProperties(prop.argument, path)
+          }
+        }
+      } else if (param.type === 'ArrayPattern') {
+        for (let index = 0; index < param.elements.length; index++) {
+          const element = param.elements[index]
+          yield * iterateParamProperties(element, [...path, `${index}`])
         }
       }
-      return false
     }
 
     return Object.assign({},
@@ -207,59 +237,123 @@ module.exports = {
               }
             }
           },
-          // this.xxx <=|+=|-=>
-          'AssignmentExpression' (node, { node: vueNode }) {
-            if (node.left.type !== 'MemberExpression') {
+          'Property[value.type=/^(Arrow)?FunctionExpression$/]' (node, { node: vueNode }) {
+            if (node.parent !== vueNode) {
               return
             }
-            verifyMember(node.left, vueNode, false)
-          },
-          // this.xxx <++|-->
-          'UpdateExpression > MemberExpression' (node, { node: vueNode }) {
-            verifyMember(node, vueNode, false)
+            if (utils.getStaticPropertyName(node) !== 'setup') {
+              return
+            }
+            /** @type {Pattern} */
+            const propsParam = node.value.params[0]
+            if (!propsParam) {
+              // no arguments
+              return
+            }
+            if (propsParam.type === 'RestElement' || propsParam.type === 'ArrayPattern') {
+              // cannot check
+              return
+            }
+            for (const { node: prop, path } of iterateParamProperties(propsParam, [])) {
+              // @ts-ignore
+              const variable = findVariable(context.getScope(), prop)
+              if (!variable) {
+                continue
+              }
+
+              for (const reference of variable.references) {
+                if (!reference.isRead()) {
+                  continue
+                }
+                /** @type {Identifier} */
+                const id = reference.identifier
+
+                const invalid = findMutating(id)
+                if (!invalid) {
+                  continue
+                }
+                let name
+                if (path.length === 0) {
+                  if (invalid.pathNodes.length === 0) {
+                    continue
+                  }
+                  const mem = invalid.pathNodes[0]
+                  name = getPropertyNameText(mem)
+                } else {
+                  if (invalid.pathNodes.length === 0 && invalid.kind !== 'call') {
+                    continue
+                  }
+                  name = path[0]
+                }
+
+                report(invalid.node, name)
+              }
+            }
           },
-          // this.xxx.func()
-          'CallExpression' (node, { node: vueNode }) {
-            verifyCall(node, vueNode, false)
+          'MemberExpression > :matches(Identifier, ThisExpression)' (node, { node: vueNode }) {
+            if (!utils.isThis(node, context)) {
+              return
+            }
+            /** @type {MemberExpression} */
+            const mem = node.parent
+            if (mem.object !== node) {
+              return
+            }
+            const name = utils.getStaticPropertyName(mem)
+            if (name && propsMap.get(vueNode).has(name)) {
+              verifyMutating(mem, name)
+            }
           }
         }
       ),
       utils.defineTemplateBodyVisitor(context, {
-        // this.xxx <=|+=|-=>
-        'VExpressionContainer AssignmentExpression' (node) {
+        'VExpressionContainer MemberExpression > ThisExpression' (node) {
           if (!vueObjectData) {
             return
           }
-          if (node.left.type === 'Identifier') {
-            verifyIdInTemplate(node.left, vueObjectData.object)
-          } else if (node.left.type === 'MemberExpression') {
-            verifyMember(node.left, vueObjectData.object, true)
-          }
-        },
-        // this.xxx <++|-->
-        'VExpressionContainer UpdateExpression > :matches(Identifier, MemberExpression)' (node) {
-          if (!vueObjectData) {
+          /** @type {MemberExpression} */
+          const mem = node.parent
+          if (mem.object !== node) {
             return
           }
-          if (node.type === 'Identifier') {
-            verifyIdInTemplate(node, vueObjectData.object)
-          } else {
-            // node.type === 'MemberExpression'
-            verifyMember(node, vueObjectData.object, true)
+          const name = utils.getStaticPropertyName(mem)
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            verifyMutating(mem, name)
           }
         },
-        // this.xxx.func()
-        'VExpressionContainer CallExpression' (node) {
+        'VExpressionContainer Identifier' (node) {
           if (!vueObjectData) {
             return
           }
-          verifyCall(node, vueObjectData.object, true)
+          if (!isVmReference(node)) {
+            return
+          }
+          const name = node.name
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            verifyMutating(node, name)
+          }
         },
         "VAttribute[directive=true][key.name.name='model'] VExpressionContainer > *" (node) {
           if (!vueObjectData) {
             return
           }
-          verifyVModelExpr(node, vueObjectData.object)
+          const nodes = utils.getMemberChaining(node)
+          const first = nodes[0]
+          let name
+          if (isVmReference(first)) {
+            name = first.name
+          } else if (first.type === 'ThisExpression') {
+            const mem = nodes[1]
+            if (!mem) {
+              return
+            }
+            name = utils.getStaticPropertyName(mem)
+          } else {
+            return
+          }
+          if (name && propsMap.get(vueObjectData.object).has(name)) {
+            report(node, name)
+          }
         }
       })
     )
diff --git a/lib/utils/index.js b/lib/utils/index.js
index c894c0160..88e0945d5 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -836,6 +836,24 @@ module.exports = {
 
     return nodes.reverse()
   },
+  /**
+   * Get the chaining nodes of CallExpression or MemberExpression.
+   *
+   * @param  {ESLintNode} node The node to parse (MemberExpression | CallExpression)
+   * @return {[ESLintNode, ...MemberExpression[]]} The chaining nodes
+   */
+  getMemberChaining (node) {
+    const nodes = []
+    let n = node
+
+    while (n.type === 'MemberExpression') {
+      nodes.push(n)
+      n = n.object
+    }
+    nodes.push(n)
+
+    return nodes.reverse()
+  },
   /**
    * Parse CallExpression or MemberExpression to get simplified version without arguments
    *
@@ -870,7 +888,7 @@ module.exports = {
       parsedCallee.push('this')
     }
 
-    return parsedCallee.reverse()
+    return parsedCallee.reverse().join('.').replace(/\.\[/g, '[')
   },
 
   /**
diff --git a/tests/lib/rules/no-mutating-props.js b/tests/lib/rules/no-mutating-props.js
index d4928863c..d87df48b9 100644
--- a/tests/lib/rules/no-mutating-props.js
+++ b/tests/lib/rules/no-mutating-props.js
@@ -18,7 +18,7 @@ const RuleTester = require('eslint').RuleTester
 const ruleTester = new RuleTester({
   parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module'
   }
 })
@@ -151,6 +151,10 @@ ruleTester.run('no-mutating-props', rule, {
             <input v-model="prop()">
             <input v-model="foo">
             <input @click="prop().foo++">
+            <input v-model="foo[this]">
+            <input v-model="foo[this.prop]">
+            <input v-model="this">
+            <MyComp @click="bar = {prop: foo++}"></MyComp>
           </div>
         </template>
         <script>
@@ -164,6 +168,8 @@ ruleTester.run('no-mutating-props', rule, {
                 vm.prop()()
                 prop++
                 prop = 1
+                const bar = {prop: foo}
+                prop[this] ++
               }
             }
           }
@@ -179,9 +185,113 @@ ruleTester.run('no-mutating-props', rule, {
             <button @click="foo+=1"></button>
             <button @click="foo.push($event)"></button>
             <input v-model="foo">
+            <input v-model="this.foo">
           </div>
         </template>
       `
+    },
+
+    // setup
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props ++
+              props = 1
+              props.push(1)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a}) {
+              a ++
+              a = 1
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({...props}) {
+              props ++
+              props = 1
+              props.push(1)
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            ssss(props) {
+              props.a ++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              const a = props.a
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup() {
+              props.a++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(...props) {
+              props.a++
+            }
+          }
+        </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup([props]) {
+              props.a++
+            }
+          }
+        </script>
+      `
     }
   ],
 
@@ -364,6 +474,167 @@ ruleTester.run('no-mutating-props', rule, {
           line: 7
         }
       ]
+    },
+
+    // setup
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props.a ++
+              props.b = 1
+              props.c.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a,b,c, d: [e, , f]}) {
+              a.foo ++
+              b.foo = 1
+              c.push(1)
+
+              c.x.push(1)
+              e.foo++
+              f.foo++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 9
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 10
+        },
+        {
+          message: 'Unexpected mutation of "d" prop.',
+          line: 11
+        }
+      ]
+    },
+
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({a: foo, b: [...bar], c: baz = 1}) {
+              foo.x ++
+              bar.x = 1
+              baz.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({...props}) {
+              props.a ++
+              props.b = 1
+              props.c.push(1)
+            }
+          }
+        </script>
+      `,
+      errors: [
+        {
+          message: 'Unexpected mutation of "a" prop.',
+          line: 5
+        },
+        {
+          message: 'Unexpected mutation of "b" prop.',
+          line: 6
+        },
+        {
+          message: 'Unexpected mutation of "c" prop.',
+          line: 7
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup(props) {
+              props[a] ++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        'Unexpected mutation of "[a]" prop.'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <script>
+          export default {
+            setup({[a]: c}) {
+              c.foo ++
+            }
+          }
+        </script>
+      `,
+      errors: [
+        'Unexpected mutation of "[a]" prop.'
+      ]
     }
   ]
 })
diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
index b64a31425..f698a98ef 100644
--- a/tests/lib/utils/index.js
+++ b/tests/lib/utils/index.js
@@ -199,13 +199,13 @@ describe('parseMemberOrCallExpression', () => {
   it('should parse CallExpression', () => {
     node = parse(`const test = this.lorem['ipsum'].map(d => d.id).filter((a, b) => a > b).reduce((acc, d) => acc + d, 0)`)
     const parsed = utils.parseMemberOrCallExpression(node)
-    assert.deepEqual(parsed, ['this', 'lorem', '[]', 'map()', 'filter()', 'reduce()'])
+    assert.equal(parsed, 'this.lorem[].map().filter().reduce()')
   })
 
   it('should parse MemberExpression', () => {
     node = parse(`const test = this.lorem['ipsum'][0].map(d => d.id).dolor.reduce((acc, d) => acc + d, 0).sit`)
     const parsed = utils.parseMemberOrCallExpression(node)
-    assert.deepEqual(parsed, ['this', 'lorem', '[]', '[]', 'map()', 'dolor', 'reduce()', 'sit'])
+    assert.equal(parsed, 'this.lorem[][].map().dolor.reduce().sit')
   })
 })
 

From 12f15944c8f0e4c8423e9feba703adf4846f26af Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Thu, 21 May 2020 11:43:24 +0900
Subject: [PATCH 4/4] delete unused function

---
 lib/utils/index.js | 26 ++------------------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/lib/utils/index.js b/lib/utils/index.js
index 88e0945d5..8695c9649 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -815,31 +815,9 @@ module.exports = {
   },
 
   /**
-   * Get the chaining nodes of CallExpression or MemberExpression.
+   * Get the chaining nodes of MemberExpression.
    *
-   * @param  {ESLintNode} node The node to parse (MemberExpression | CallExpression)
-   * @return {ESLintNode[]} The chaining nodes
-   */
-  getMemberOrCallChaining (node) {
-    const nodes = []
-    let n = node
-
-    while (n.type === 'MemberExpression' || n.type === 'CallExpression') {
-      nodes.push(n)
-      if (n.type === 'CallExpression') {
-        n = n.callee
-      } else {
-        n = n.object
-      }
-    }
-    nodes.push(n)
-
-    return nodes.reverse()
-  },
-  /**
-   * Get the chaining nodes of CallExpression or MemberExpression.
-   *
-   * @param  {ESLintNode} node The node to parse (MemberExpression | CallExpression)
+   * @param  {ESLintNode} node The node to parse
    * @return {[ESLintNode, ...MemberExpression[]]} The chaining nodes
    */
   getMemberChaining (node) {