From b14d0f314cb57455b509ad57fe2349d22740885b Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Tue, 7 Jul 2020 23:10:00 +0900
Subject: [PATCH 01/35] chore: init rule

---
 docs/rules/no-use-computed-property-like-method.md      | 6 ++++++
 lib/rules/no-use-computed-property-like-method.js       | 4 ++++
 tests/lib/rules/no-use-computed-property-like-method.js | 4 ++++
 3 files changed, 14 insertions(+)
 create mode 100644 docs/rules/no-use-computed-property-like-method.md
 create mode 100644 lib/rules/no-use-computed-property-like-method.js
 create mode 100644 tests/lib/rules/no-use-computed-property-like-method.js

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
new file mode 100644
index 000000000..08b64382b
--- /dev/null
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -0,0 +1,6 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-use-computed-property-like-method
+description: disallow use computed properties like methods
+---
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
new file mode 100644
index 000000000..fdefaf422
--- /dev/null
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -0,0 +1,4 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ * See LICENSE file in root directory for full license.
+ */
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
new file mode 100644
index 000000000..fdefaf422
--- /dev/null
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -0,0 +1,4 @@
+/**
+ * @author tyankatsu <https://github.com/tyankatsu0105>
+ * See LICENSE file in root directory for full license.
+ */

From 6b0b8609d92fd361240d1fb2e76f92b1beb59b17 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 10:17:18 +0900
Subject: [PATCH 02/35] feat: getable methodProperties

---
 .tool-versions                                |   1 +
 .../no-use-computed-property-like-method.js   | 186 ++++++++++++++++++
 .../no-use-computed-property-like-method.js   | 131 ++++++++++++
 3 files changed, 318 insertions(+)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 000000000..dfaa2aed4
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 12.18.0
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index fdefaf422..82761dd3b 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -2,3 +2,189 @@
  * @author tyankatsu <https://github.com/tyankatsu0105>
  * See LICENSE file in root directory for full license.
  */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const {
+  defineVueVisitor,
+  getComputedProperties,
+  getComponentProps,
+
+  isProperty,
+  getStaticPropertyName,
+  unwrapTypes
+} = require('../utils')
+
+/**
+ * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+/**
+ * @typedef { {key: string | null, value: BlockStatement | null} } ComponentMethodProperty
+ */
+
+/**
+ * Get all method by looking at all component's properties
+ * @param {ObjectExpression} componentObject Object with component definition
+ * @return {ComponentMethodProperty[]} Array of methods in format: [{key: String, value: ASTNode}]
+ */
+const getMethodProperties = (componentObject) => {
+  const methodsNode = componentObject.properties.find(
+    /**
+     * @param {ESNode} property
+     * @returns {property is (Property & { key: Identifier & {name: 'method'}, value: ObjectExpression })}
+     */
+    (property) => {
+      return (
+        property.type === 'Property' &&
+        property.key.type === 'Identifier' &&
+        property.key.name === 'methods' &&
+        property.value.type === 'ObjectExpression'
+      )
+    }
+  )
+
+  if (!methodsNode) {
+    return []
+  }
+
+  return methodsNode.value.properties.filter(isProperty).map((method) => {
+    const key = getStaticPropertyName(method)
+    /** @type {Expression} */
+    const propValue = unwrapTypes(method.value)
+    /** @type {BlockStatement | null} */
+    let value = null
+
+    if (propValue.type === 'FunctionExpression') {
+      value = propValue.body
+    } else if (propValue.type === 'ObjectExpression') {
+      const get = propValue.properties.find(
+        /**
+         * @param {ESNode} p
+         * @returns { p is (Property & { value: FunctionExpression }) }
+         */
+        (p) =>
+          p.type === 'Property' &&
+          p.key.type === 'Identifier' &&
+          p.key.name === 'get' &&
+          p.value.type === 'FunctionExpression'
+      )
+      value = get ? get.value.body : null
+    }
+
+    return { key, value }
+  })
+}
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'enforce',
+      categories: undefined,
+      url:
+        'https://eslint.vuejs.org/rules/no-use-computed-property-like-method.html'
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected: 'Unexpected multiple objects. Merge objects.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {BlockStatement | Expression} body
+     */
+    /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
+    const computedPropertiesMap = new Map()
+
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {BlockStatement | Expression} body
+     */
+    /** @type {Map<ObjectExpression, ComponentObjectProp[]>} */
+    const propsMap = new Map()
+
+    /**
+     * @typedef {object} ScopeStack
+     * @property {ScopeStack | null} upper
+     * @property {BlockStatement | Expression} body
+     */
+    /** @type {Map<ObjectExpression, ComponentMthodProperty[]>} */
+    const methodPropertiesMap = new Map()
+    return defineVueVisitor(context, {
+      onVueObjectEnter(node) {
+        computedPropertiesMap.set(node, getComputedProperties(node))
+        propsMap.set(node, getComponentProps(node))
+        methodPropertiesMap.set(node, getMethodProperties(node))
+      },
+
+      /** @param {MemberExpression} node */
+      'MemberExpression[object.type="ThisExpression"]'(
+        node,
+        { node: vueNode }
+      ) {
+        if (node.property.type !== 'Identifier') return
+
+        const computedProperties = computedPropertiesMap
+          .get(vueNode)
+          .map((item) => item.key)
+
+        const methodProperties = methodPropertiesMap
+          .get(vueNode)
+          .map((item) => item.key)
+
+        /**
+         * propsProperties that excluded when type is array, and props property type is `Function`
+         */
+        const propsProperties = propsMap.get(vueNode).reduce((acc, current) => {
+          // ignore `props: ['props1', 'props2']`
+          if (current.type === 'array') return acc
+
+          current.value.properties.reduce((accProperties, property) => {
+            // ignore `type: Function`
+            if (
+              property.key.name === 'type' &&
+              property.value.name === 'Function'
+            )
+              return accProperties
+
+            accProperties.push(property)
+            return accProperties
+          }, [])
+
+          acc.push(current.propName)
+          return acc
+        }, [])
+
+        const properties = [
+          ...computedProperties,
+          ...methodProperties,
+          ...propsProperties
+        ]
+
+        console.log(properties)
+
+        // if (!computedProperties.includes(node.property.name)) return
+
+        // context.report({
+        //   node: node.property,
+        //   loc: node.property.loc,
+        //   messageId:
+        // })
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index fdefaf422..8b153c1ca 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -2,3 +2,134 @@
  * @author tyankatsu <https://github.com/tyankatsu0105>
  * See LICENSE file in root directory for full license.
  */
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-use-computed-property-like-method')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015, sourceType: 'module' }
+})
+
+tester.run('no-use-computed-property-like-method', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            name() {
+              return 'name';
+            }
+          },
+          methods: {
+            getName() {
+              return this.name
+            }
+          },
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            name: {
+              type: String
+            },
+          },
+          computed: {
+            isExpectedName() {
+              return this.name === 'name';
+            }
+          },
+          methods: {
+            getName() {
+              return this.isExpectedName
+            }
+          },
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            name() {
+              return 'name';
+            },
+            isExpectedName() {
+              return this.name === 'name';
+            }
+          },
+          methods: {
+            getName() {
+              return this.isExpectedName
+            }
+          },
+        }
+      </script>
+      `
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            name() {
+              return 'name';
+            }
+          },
+          methods: {
+            getName() {
+              return this.name()
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            name: {
+              type: String
+            },
+          },
+          computed: {
+            isExpectedName() {
+              return this.name === 'name';
+            }
+          },
+          methods: {
+            getName() {
+              return this.isExpectedName()
+            }
+          }
+        }
+      </script>
+      `
+    }
+  ]
+})

From 4d8ae20d43a9b85d13bccd7b7b86b907f09949f5 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 10:29:25 +0900
Subject: [PATCH 03/35] feat: move getMethodProperties into util

---
 .../no-use-computed-property-like-method.js   | 62 +------------------
 lib/utils/index.js                            | 56 +++++++++++++++++
 2 files changed, 57 insertions(+), 61 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 82761dd3b..c5d08a787 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -12,10 +12,7 @@ const {
   defineVueVisitor,
   getComputedProperties,
   getComponentProps,
-
-  isProperty,
-  getStaticPropertyName,
-  unwrapTypes
+  getMethodProperties
 } = require('../utils')
 
 /**
@@ -27,63 +24,6 @@ const {
 // Rule Definition
 // ------------------------------------------------------------------------------
 
-/**
- * @typedef { {key: string | null, value: BlockStatement | null} } ComponentMethodProperty
- */
-
-/**
- * Get all method by looking at all component's properties
- * @param {ObjectExpression} componentObject Object with component definition
- * @return {ComponentMethodProperty[]} Array of methods in format: [{key: String, value: ASTNode}]
- */
-const getMethodProperties = (componentObject) => {
-  const methodsNode = componentObject.properties.find(
-    /**
-     * @param {ESNode} property
-     * @returns {property is (Property & { key: Identifier & {name: 'method'}, value: ObjectExpression })}
-     */
-    (property) => {
-      return (
-        property.type === 'Property' &&
-        property.key.type === 'Identifier' &&
-        property.key.name === 'methods' &&
-        property.value.type === 'ObjectExpression'
-      )
-    }
-  )
-
-  if (!methodsNode) {
-    return []
-  }
-
-  return methodsNode.value.properties.filter(isProperty).map((method) => {
-    const key = getStaticPropertyName(method)
-    /** @type {Expression} */
-    const propValue = unwrapTypes(method.value)
-    /** @type {BlockStatement | null} */
-    let value = null
-
-    if (propValue.type === 'FunctionExpression') {
-      value = propValue.body
-    } else if (propValue.type === 'ObjectExpression') {
-      const get = propValue.properties.find(
-        /**
-         * @param {ESNode} p
-         * @returns { p is (Property & { value: FunctionExpression }) }
-         */
-        (p) =>
-          p.type === 'Property' &&
-          p.key.type === 'Identifier' &&
-          p.key.name === 'get' &&
-          p.value.type === 'FunctionExpression'
-      )
-      value = get ? get.value.body : null
-    }
-
-    return { key, value }
-  })
-}
-
 module.exports = {
   meta: {
     type: 'problem',
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 814517e39..6278ddc4f 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -80,6 +80,9 @@
 /**
  * @typedef { {key: string | null, value: BlockStatement | null} } ComponentComputedProperty
  */
+/**
+ * @typedef { {key: string | null, value: BlockStatement | null} } ComponentMethodProperty
+ */
 /**
  * @typedef { 'props' | 'data' | 'computed' | 'setup' | 'watch' | 'methods' } GroupName
  * @typedef { { type: 'array',  name: string, groupName: GroupName, node: Literal | TemplateLiteral } } ComponentArrayPropertyData
@@ -845,6 +848,59 @@ module.exports = {
       })
   },
 
+  /**
+   * Get all method by looking at all component's properties
+   * @param {ObjectExpression} componentObject Object with component definition
+   * @return {ComponentMethodProperty[]} Array of methods in format: [{key: String, value: ASTNode}]
+   */
+  getMethodProperties(componentObject) {
+    const methodsNode = componentObject.properties.find(
+      /**
+       * @param {ESNode} property
+       * @returns {property is (Property & { key: Identifier & {name: 'method'}, value: ObjectExpression })}
+       */
+      (property) => {
+        return (
+          property.type === 'Property' &&
+          property.key.type === 'Identifier' &&
+          property.key.name === 'methods' &&
+          property.value.type === 'ObjectExpression'
+        )
+      }
+    )
+
+    if (!methodsNode) {
+      return []
+    }
+
+    return methodsNode.value.properties.filter(isProperty).map((method) => {
+      const key = getStaticPropertyName(method)
+      /** @type {Expression} */
+      const propValue = skipTSAsExpression(method.value)
+      /** @type {BlockStatement | null} */
+      let value = null
+
+      if (propValue.type === 'FunctionExpression') {
+        value = propValue.body
+      } else if (propValue.type === 'ObjectExpression') {
+        const get = propValue.properties.find(
+          /**
+           * @param {ESNode} p
+           * @returns { p is (Property & { value: FunctionExpression }) }
+           */
+          (p) =>
+            p.type === 'Property' &&
+            p.key.type === 'Identifier' &&
+            p.key.name === 'get' &&
+            p.value.type === 'FunctionExpression'
+        )
+        value = get ? get.value.body : null
+      }
+
+      return { key, value }
+    })
+  },
+
   isVueFile,
 
   /**

From 7aaf02d763e0b42b6641852acd9be1ab679a54a1 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 11:35:44 +0900
Subject: [PATCH 04/35] feat: pass rule

---
 .../no-use-computed-property-like-method.js   | 23 +++++++------------
 .../no-use-computed-property-like-method.js   |  6 +++--
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index c5d08a787..2e343fc5b 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -36,7 +36,7 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      unexpected: 'Unexpected multiple objects. Merge objects.'
+      unexpected: 'Does not allow to use computed with this expression.'
     }
   },
   /** @param {RuleContext} context */
@@ -77,6 +77,7 @@ module.exports = {
         { node: vueNode }
       ) {
         if (node.property.type !== 'Identifier') return
+        if (node.parent.type !== 'CallExpression') return
 
         const computedProperties = computedPropertiesMap
           .get(vueNode)
@@ -109,21 +110,13 @@ module.exports = {
           return acc
         }, [])
 
-        const properties = [
-          ...computedProperties,
-          ...methodProperties,
-          ...propsProperties
-        ]
+        if (!computedProperties.includes(node.property.name)) return
 
-        console.log(properties)
-
-        // if (!computedProperties.includes(node.property.name)) return
-
-        // context.report({
-        //   node: node.property,
-        //   loc: node.property.loc,
-        //   messageId:
-        // })
+        context.report({
+          node: node.property,
+          loc: node.property.loc,
+          messageId: 'unexpected'
+        })
       }
     })
   }
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index 8b153c1ca..f1a928dda 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -105,7 +105,8 @@ tester.run('no-use-computed-property-like-method', rule, {
           }
         }
       </script>
-      `
+      `,
+      errors: ['Does not allow to use computed with this expression.']
     },
     {
       filename: 'test.vue',
@@ -129,7 +130,8 @@ tester.run('no-use-computed-property-like-method', rule, {
           }
         }
       </script>
-      `
+      `,
+      errors: ['Does not allow to use computed with this expression.']
     }
   ]
 })

From f5c426c39a16fa3f71a00d51420af06643383cd7 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 11:38:01 +0900
Subject: [PATCH 05/35] feat: remove getMethodProperties

---
 .../no-use-computed-property-like-method.js   | 51 +----------------
 lib/utils/index.js                            | 56 -------------------
 2 files changed, 1 insertion(+), 106 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 2e343fc5b..166451a47 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -8,12 +8,7 @@
 // Requirements
 // ------------------------------------------------------------------------------
 
-const {
-  defineVueVisitor,
-  getComputedProperties,
-  getComponentProps,
-  getMethodProperties
-} = require('../utils')
+const { defineVueVisitor, getComputedProperties } = require('../utils')
 
 /**
  * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
@@ -49,26 +44,9 @@ module.exports = {
     /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
     const computedPropertiesMap = new Map()
 
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {BlockStatement | Expression} body
-     */
-    /** @type {Map<ObjectExpression, ComponentObjectProp[]>} */
-    const propsMap = new Map()
-
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {BlockStatement | Expression} body
-     */
-    /** @type {Map<ObjectExpression, ComponentMthodProperty[]>} */
-    const methodPropertiesMap = new Map()
     return defineVueVisitor(context, {
       onVueObjectEnter(node) {
         computedPropertiesMap.set(node, getComputedProperties(node))
-        propsMap.set(node, getComponentProps(node))
-        methodPropertiesMap.set(node, getMethodProperties(node))
       },
 
       /** @param {MemberExpression} node */
@@ -83,33 +61,6 @@ module.exports = {
           .get(vueNode)
           .map((item) => item.key)
 
-        const methodProperties = methodPropertiesMap
-          .get(vueNode)
-          .map((item) => item.key)
-
-        /**
-         * propsProperties that excluded when type is array, and props property type is `Function`
-         */
-        const propsProperties = propsMap.get(vueNode).reduce((acc, current) => {
-          // ignore `props: ['props1', 'props2']`
-          if (current.type === 'array') return acc
-
-          current.value.properties.reduce((accProperties, property) => {
-            // ignore `type: Function`
-            if (
-              property.key.name === 'type' &&
-              property.value.name === 'Function'
-            )
-              return accProperties
-
-            accProperties.push(property)
-            return accProperties
-          }, [])
-
-          acc.push(current.propName)
-          return acc
-        }, [])
-
         if (!computedProperties.includes(node.property.name)) return
 
         context.report({
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 6278ddc4f..814517e39 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -80,9 +80,6 @@
 /**
  * @typedef { {key: string | null, value: BlockStatement | null} } ComponentComputedProperty
  */
-/**
- * @typedef { {key: string | null, value: BlockStatement | null} } ComponentMethodProperty
- */
 /**
  * @typedef { 'props' | 'data' | 'computed' | 'setup' | 'watch' | 'methods' } GroupName
  * @typedef { { type: 'array',  name: string, groupName: GroupName, node: Literal | TemplateLiteral } } ComponentArrayPropertyData
@@ -848,59 +845,6 @@ module.exports = {
       })
   },
 
-  /**
-   * Get all method by looking at all component's properties
-   * @param {ObjectExpression} componentObject Object with component definition
-   * @return {ComponentMethodProperty[]} Array of methods in format: [{key: String, value: ASTNode}]
-   */
-  getMethodProperties(componentObject) {
-    const methodsNode = componentObject.properties.find(
-      /**
-       * @param {ESNode} property
-       * @returns {property is (Property & { key: Identifier & {name: 'method'}, value: ObjectExpression })}
-       */
-      (property) => {
-        return (
-          property.type === 'Property' &&
-          property.key.type === 'Identifier' &&
-          property.key.name === 'methods' &&
-          property.value.type === 'ObjectExpression'
-        )
-      }
-    )
-
-    if (!methodsNode) {
-      return []
-    }
-
-    return methodsNode.value.properties.filter(isProperty).map((method) => {
-      const key = getStaticPropertyName(method)
-      /** @type {Expression} */
-      const propValue = skipTSAsExpression(method.value)
-      /** @type {BlockStatement | null} */
-      let value = null
-
-      if (propValue.type === 'FunctionExpression') {
-        value = propValue.body
-      } else if (propValue.type === 'ObjectExpression') {
-        const get = propValue.properties.find(
-          /**
-           * @param {ESNode} p
-           * @returns { p is (Property & { value: FunctionExpression }) }
-           */
-          (p) =>
-            p.type === 'Property' &&
-            p.key.type === 'Identifier' &&
-            p.key.name === 'get' &&
-            p.value.type === 'FunctionExpression'
-        )
-        value = get ? get.value.body : null
-      }
-
-      return { key, value }
-    })
-  },
-
   isVueFile,
 
   /**

From e97c749e4e1a2d2d778f29715f76ecb39902a352 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 11:45:50 +0900
Subject: [PATCH 06/35] docs: add docs

---
 .../no-use-computed-property-like-method.md   | 52 ++++++++++++++++++-
 .../no-use-computed-property-like-method.js   |  2 +-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 08b64382b..be1cd56ff 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -2,5 +2,55 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/no-use-computed-property-like-method
-description: disallow use computed properties like methods
+description: disallow use computed property like method
 ---
+
+# vue/no-use-computed-property-like-method
+> disallow use computed property like method
+
+## :book: Rule Details
+
+This rule disallows to use computed property like method.  
+
+<eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
+
+```vue
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      name: {
+        type: String
+      },
+    },
+    computed: {
+      isExpectedName() {
+        return this.name === 'name';
+      }
+    },
+    methods: {
+      getName() {
+        return this.isExpectedName
+      },
+      getNameCallLikeMethod() {
+        return this.isExpectedName()
+      }
+    }
+  }
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-computed-property-like-method.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-computed-property-like-method.js)
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 166451a47..42943ad9b 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -23,7 +23,7 @@ module.exports = {
   meta: {
     type: 'problem',
     docs: {
-      description: 'enforce',
+      description: 'disallow use computed property like method',
       categories: undefined,
       url:
         'https://eslint.vuejs.org/rules/no-use-computed-property-like-method.html'

From c61acae4acb1ed025db11a2e4195f6c497545c51 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 10 Oct 2020 11:46:28 +0900
Subject: [PATCH 07/35] chore: run update

---
 docs/rules/README.md                               | 1 +
 docs/rules/no-use-computed-property-like-method.md | 1 -
 lib/index.js                                       | 1 +
 3 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 1ffb102f8..a7aef3c2c 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -308,6 +308,7 @@ For example:
 | [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates |  |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
 | [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  |
+| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  |
 | [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
 | [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: |
 | [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index be1cd56ff..05ca91f85 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -4,7 +4,6 @@ sidebarDepth: 0
 title: vue/no-use-computed-property-like-method
 description: disallow use computed property like method
 ---
-
 # vue/no-use-computed-property-like-method
 > disallow use computed property like method
 
diff --git a/lib/index.js b/lib/index.js
index eb6a42915..79a475427 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -107,6 +107,7 @@ module.exports = {
     'no-unused-components': require('./rules/no-unused-components'),
     'no-unused-properties': require('./rules/no-unused-properties'),
     'no-unused-vars': require('./rules/no-unused-vars'),
+    'no-use-computed-property-like-method': require('./rules/no-use-computed-property-like-method'),
     'no-use-v-if-with-v-for': require('./rules/no-use-v-if-with-v-for'),
     'no-useless-concat': require('./rules/no-useless-concat'),
     'no-useless-mustaches': require('./rules/no-useless-mustaches'),

From 587d808eed1e199657fbf87232d6129111823033 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 13 Nov 2020 23:56:38 +0900
Subject: [PATCH 08/35] feat: check return type of data props methods computed

---
 .../no-use-computed-property-like-method.md   |  75 +++-
 .../no-use-computed-property-like-method.js   | 260 +++++++++++--
 .../no-use-computed-property-like-method.js   | 366 ++++++++++++++++--
 3 files changed, 639 insertions(+), 62 deletions(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 05ca91f85..078ebe78e 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -21,22 +21,83 @@ This rule disallows to use computed property like method.
 
 <script>
   export default {
+    data() {
+      return {
+        dataString: 'dataString',
+        dataNumber: 10,
+        dataObject: {
+          inside: "inside"
+        },
+        dataArray: [1,2,3,4,5],
+        dataBoolean: true,
+        dataFunction() {
+          alert('dataFunction')
+        }
+      }
+    },
     props: {
-      name: {
+      propsString: {
         type: String
       },
+      propsNumber: {
+        type: Number
+      },
+      propsObject: {
+        type: Object
+      },
+      propsArray: {
+        type: Array
+      },
+      propsBoolean: {
+        type: Boolean
+      },
+      propsFunction: {
+        type: Function
+      },
     },
     computed: {
-      isExpectedName() {
-        return this.name === 'name';
+      computedReturnString() {
+        return 'computedReturnString'
+      },
+      computedReturnNumber() {
+        return 10
+      },
+      computedReturnObject() {
+        return {
+          inside: "inside"
+        }
+      },
+      computedReturnArray() {
+        return [1,2,3,4,5]
+      },
+      computedReturnBoolean() {
+        return true
+      },
+      computedReturnFunction() {
+        const fn = () => alert('computedReturnFunction')
+        return fn
       }
     },
     methods: {
-      getName() {
-        return this.isExpectedName
+      methodsReturnString() {
+        return 'methodsReturnString'
+      },
+      methodsReturnNumber() {
+        return 'methodsReturnNumber'
+      },
+      methodsReturnObject() {
+        return {
+          inside: "inside"
+        }
+      },
+      methodsReturnArray() {
+        return [1,2,3,4,5]
+      },
+      methodsReturnBoolean() {
+        return true
       },
-      getNameCallLikeMethod() {
-        return this.isExpectedName()
+      methodsReturnFunction() {
+        console.log(this.dataObject.inside);
       }
     }
   }
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 42943ad9b..3ed47ab14 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -7,18 +7,198 @@
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
-
-const { defineVueVisitor, getComputedProperties } = require('../utils')
+const eslitUtils = require('eslint-utils')
+const utils = require('../utils')
 
 /**
  * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
  * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentPropertyData} ComponentPropertyData
+ * @typedef {import('../utils').ComponentObjectPropertyData} ComponentObjectPropertyData
+ *
+ * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string } }}} ProprtyMap
  */
-
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+function replacer(key, value) {
+  if (key === 'parent') {
+    return undefined
+  }
+  if (key === 'errors' && Array.isArray(value)) {
+    return value.map((e) => ({
+      message: e.message,
+      index: e.index,
+      lineNumber: e.lineNumber,
+      column: e.column
+    }))
+  }
+  return value
+}
+
+/**
+ *
+ * @param {ComponentObjectPropertyData} property
+ * @return {string | null}
+ */
+const getComponetPropsType = (property) => {
+  if (property.property.value.type === 'ObjectExpression') {
+    const propsTypeProperty = property.property.value.properties.find(
+      (property) =>
+        property.type === 'Property' &&
+        property.key.type === 'Identifier' &&
+        property.key.name === 'type' &&
+        property.value.type === 'Identifier'
+    )
+
+    if (propsTypeProperty === undefined) return null
+
+    if (
+      propsTypeProperty.type === 'Property' &&
+      propsTypeProperty.value.type === 'Identifier'
+    )
+      return propsTypeProperty.value.name
+  }
+  return null
+}
+
+/**
+ *
+ * @param {any} obj
+ */
+const getPrototypeType = (obj) =>
+  Object.prototype.toString.call(obj).slice(8, -1)
+
+/**
+ *
+ * @param {Expression | Super} objectOrCallee
+ * @returns {string | null}
+ */
+// const getThisMember = (objectOrCallee) => {
+//   if (objectOrCallee.type === 'MemberExpression') {
+//     if (objectOrCallee.object.type === 'Identifier') return null
+
+//     if (
+//       objectOrCallee.object.type === 'ThisExpression' &&
+//       objectOrCallee.property.type === 'Identifier'
+//     )
+//       return objectOrCallee.property.name
+
+//     if (objectOrCallee.object.type === 'MemberExpression')
+//       getThisMember(objectOrCallee.object)
+//   }
+
+//   if (objectOrCallee.type === 'CallExpression') {
+//     if (objectOrCallee.callee.type === 'Identifier') return null
+
+//     getThisMember(objectOrCallee.callee)
+//   }
+// }
+
+/**
+ * Get return type of property.
+ * @param {{ property: ComponentPropertyData, propertyMap: ProprtyMap }} args
+ */
+const getValueType = ({ property, propertyMap }) => {
+  if (property.type === 'array') {
+    return {
+      type: null
+    }
+  }
+
+  if (property.type === 'object') {
+    if (property.groupName === 'props') {
+      return {
+        type: getComponetPropsType(property)
+      }
+    }
+
+    if (property.groupName === 'computed' || property.groupName === 'methods') {
+      if (
+        property.property.value.type === 'FunctionExpression' &&
+        property.property.value.body.type === 'BlockStatement'
+      ) {
+        const blockStatement = property.property.value.body
+
+        /**
+         * Only check return statement inside computed and methods
+         */
+        const returnStatement = blockStatement.body.find(
+          (b) => b.type === 'ReturnStatement'
+        )
+        if (!returnStatement || returnStatement.type !== 'ReturnStatement')
+          return
+
+        // if (property.groupName === 'computed') {
+        //   if (
+        //     propertyMap &&
+        //     propertyMap[property.name] &&
+        //     returnStatement.argument
+        //   ) {
+        //     const thisMember = getThisMember(returnStatement.argument)
+        //     return {
+        //       type: propertyMap[thisMember].valueType.type
+        //     }
+        //   }
+        // }
+
+        /**
+         * TODO: consider this.xxx.xxx().xxx.xxx().xxx().....
+         */
+        if (property.groupName === 'computed') {
+          if (
+            propertyMap &&
+            propertyMap[property.name] &&
+            returnStatement.argument &&
+            returnStatement.argument.type === 'MemberExpression' &&
+            returnStatement.argument.property.type === 'Identifier'
+          )
+            return {
+              type:
+                propertyMap[returnStatement.argument.property.name].valueType
+                  .type
+            }
+
+          if (
+            propertyMap &&
+            propertyMap[property.name] &&
+            returnStatement.argument &&
+            returnStatement.argument.type === 'CallExpression' &&
+            returnStatement.argument.callee.type === 'MemberExpression' &&
+            returnStatement.argument.callee.property.type === 'Identifier'
+          )
+            return {
+              type:
+                propertyMap[returnStatement.argument.callee.property.name]
+                  .valueType.type
+            }
+        }
+
+        const evaluated = eslitUtils.getStaticValue(returnStatement.argument)
+
+        if (evaluated) {
+          return {
+            type: getPrototypeType(evaluated.value)
+          }
+        }
+      }
+    }
+
+    const evaluated = eslitUtils.getStaticValue(property.property.value)
+
+    if (evaluated) {
+      return {
+        type: getPrototypeType(evaluated.value)
+      }
+    }
+
+    return {
+      type: null
+    }
+  }
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -31,43 +211,67 @@ module.exports = {
     fixable: null,
     schema: [],
     messages: {
-      unexpected: 'Does not allow to use computed with this expression.'
+      unexpected: 'Use {{ likeProperty }} instead of {{ likeMethod }}.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
-    /**
-     * @typedef {object} ScopeStack
-     * @property {ScopeStack | null} upper
-     * @property {BlockStatement | Expression} body
-     */
-    /** @type {Map<ObjectExpression, ComponentComputedProperty[]>} */
-    const computedPropertiesMap = new Map()
-
-    return defineVueVisitor(context, {
+    const GROUP_NAMES = ['data', 'props', 'computed', 'methods']
+    const groups = new Set(GROUP_NAMES)
+
+    /** @type ProprtyMap */
+    const propertyMap = {}
+
+    /**@type ObjectExpression */
+    let nodeMap = {}
+
+    return utils.defineVueVisitor(context, {
       onVueObjectEnter(node) {
-        computedPropertiesMap.set(node, getComputedProperties(node))
+        nodeMap = node
+        const properties = utils.iterateProperties(node, groups)
+
+        for (const property of properties) {
+          propertyMap[property.name] = {
+            ...propertyMap[property.name],
+            ...property,
+            valueType: getValueType({ property })
+          }
+        }
       },
 
       /** @param {MemberExpression} node */
-      'MemberExpression[object.type="ThisExpression"]'(
-        node,
-        { node: vueNode }
-      ) {
-        if (node.property.type !== 'Identifier') return
+      'MemberExpression[object.type="ThisExpression"]'(node) {
         if (node.parent.type !== 'CallExpression') return
+        if (node.property.type !== 'Identifier') return
+
+        const properties = utils.iterateProperties(nodeMap, groups)
+
+        for (const property of properties) {
+          propertyMap[property.name] = {
+            ...propertyMap[property.name],
+            ...property,
+            valueType: getValueType({ property, propertyMap })
+          }
+        }
 
-        const computedProperties = computedPropertiesMap
-          .get(vueNode)
-          .map((item) => item.key)
+        const thisMember = node.property.name
 
-        if (!computedProperties.includes(node.property.name)) return
+        if (!propertyMap[thisMember].valueType.type) return
 
-        context.report({
-          node: node.property,
-          loc: node.property.loc,
-          messageId: 'unexpected'
-        })
+        if (
+          propertyMap[thisMember].groupName === 'computed' &&
+          propertyMap[thisMember].valueType.type !== 'Function'
+        ) {
+          context.report({
+            node,
+            loc: node.loc,
+            messageId: 'unexpected',
+            data: {
+              likeProperty: `this.${thisMember}`,
+              likeMethod: `this.${thisMember}()`
+            }
+          })
+        }
       }
     })
   }
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index f1a928dda..687901b7d 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -27,15 +27,127 @@ tester.run('no-use-computed-property-like-method', rule, {
       <script>
         export default {
           computed: {
-            name() {
-              return 'name';
+            computedReturnString() {
+              return 'computedReturnString'
+            },
+            computedReturnNumber() {
+              return 10
+            },
+            computedReturnObject() {
+              return {
+                inside: "inside"
+              }
+            },
+            computedReturnArray() {
+              return [1,2,3,4,5]
+            },
+            computedReturnBoolean() {
+              return this.computedReturnArray
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnString
+              this.computedReturnNumber
+              this.computedReturnObject
+              this.computedReturnArray
+              this.computedReturnBoolean
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnFunction() {
+              const fn = () => alert('computedReturnFunction')
+              return fn
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnFunction
+              this.computedReturnFunction()
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          data() {
+            return {
+              dataString: 'dataString',
+              dataNumber: 10,
+              dataObject: {
+                inside: "inside"
+              },
+              dataArray: [1,2,3,4,5],
+              dataBoolean: true,
+            }
+          },
+          computed: {
+            computedReturnDataString() {
+              return this.dataString
+            },
+            computedReturnDataNumber() {
+              return this.dataNumber
+            },
+            computedReturnDataObject() {
+              return this.dataObject
+            },
+            computedReturnDataArray() {
+              return this.dataArray
+            },
+            computedReturnDataBoolean() {
+              return this.dataBoolean
             }
           },
           methods: {
-            getName() {
-              return this.name
+            fn() {
+              this.computedReturnDataString
+              this.computedReturnDataNumber
+              this.computedReturnDataObject
+              this.computedReturnDataArray
+              this.computedReturnDataBoolean
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          data() {
+            return {
+              dataFunction() {
+                alert('dataFunction')
+              }
+            }
+          },
+          computed: {
+            computedReturnDataFunction() {
+              return this.dataFunction
             }
           },
+          methods: {
+            fn() {
+              this.computedReturnDataFunction
+              this.computedReturnDataFunction()
+            }
+          }
         }
       </script>
       `
@@ -46,20 +158,73 @@ tester.run('no-use-computed-property-like-method', rule, {
       <script>
         export default {
           props: {
-            name: {
+            propsString: {
               type: String
             },
+            propsNumber: {
+              type: Number
+            },
+            propsObject: {
+              type: Object
+            },
+            propsArray: {
+              type: Array
+            },
+            propsBoolean: {
+              type: Boolean
+            }
           },
           computed: {
-            isExpectedName() {
-              return this.name === 'name';
+            computedReturnPropsString() {
+              return this.propsString
+            },
+            computedReturnPropsNumber() {
+              return this.propsNumber
+            },
+            computedReturnPropsObject() {
+              return this.propsObject
+            },
+            computedReturnPropsArray() {
+              return this.propsArray
+            },
+            computedReturnPropsBoolean() {
+              return this.propsBoolean
             }
           },
           methods: {
-            getName() {
-              return this.isExpectedName
+            fn() {
+              this.computedReturnPropsString
+              this.computedReturnPropsNumber
+              this.computedReturnPropsObject
+              this.computedReturnPropsArray
+              this.computedReturnPropsBoolean
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsFunction: {
+              type: Function
+            },
+          },
+          computed: {
+            computedReturnPropsFunction() {
+              return this.propsFunction
             }
           },
+          methods: {
+            fn() {
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
+            }
+          }
         }
       </script>
       `
@@ -69,19 +234,55 @@ tester.run('no-use-computed-property-like-method', rule, {
       code: `
       <script>
         export default {
+          props: [
+            "propsString",
+            "propsNumber",
+            "propsObject",
+            "propsArray",
+            "propsBoolean",
+            "propsFunction"
+          ],
           computed: {
-            name() {
-              return 'name';
+            computedReturnPropsString() {
+              return this.propsString
+            },
+            computedReturnPropsNumber() {
+              return this.propsNumber
             },
-            isExpectedName() {
-              return this.name === 'name';
+            computedReturnPropsObject() {
+              return this.propsObject
+            },
+            computedReturnPropsArray() {
+              return this.propsArray
+            },
+            computedReturnPropsBoolean() {
+              return this.propsBoolean
+            },
+            computedReturnPropsFunction() {
+              return this.propsFunction
             }
           },
           methods: {
-            getName() {
-              return this.isExpectedName
+            fn() {
+              this.computedReturnPropsString
+              this.computedReturnPropsString()
+
+              this.computedReturnPropsNumber
+              this.computedReturnPropsNumber()
+
+              this.computedReturnPropsObject
+              this.computedReturnPropsObject()
+
+              this.computedReturnPropsArray
+              this.computedReturnPropsArray()
+
+              this.computedReturnPropsBoolean
+              this.computedReturnPropsBoolean()
+
+              this.computedReturnPropsFunction
+              this.computedReturnPropsFunction()
             }
-          },
+          }
         }
       </script>
       `
@@ -94,19 +295,96 @@ tester.run('no-use-computed-property-like-method', rule, {
       <script>
         export default {
           computed: {
-            name() {
-              return 'name';
+            computedReturnString() {
+              return 'computedReturnString'
+            },
+            computedReturnNumber() {
+              return 10
+            },
+            computedReturnObject() {
+              return {
+                inside: "inside"
+              }
+            },
+            computedReturnArray() {
+              return [1,2,3,4,5]
+            },
+            computedReturnBoolean() {
+              return true
             }
           },
           methods: {
-            getName() {
-              return this.name()
+            fn() {
+              this.computedReturnString()
+              this.computedReturnNumber()
+              this.computedReturnObject()
+              this.computedReturnArray()
+              this.computedReturnBoolean()
             }
           }
         }
       </script>
       `,
-      errors: ['Does not allow to use computed with this expression.']
+      errors: [
+        'Use this.computedReturnString instead of this.computedReturnString().',
+        'Use this.computedReturnNumber instead of this.computedReturnNumber().',
+        'Use this.computedReturnObject instead of this.computedReturnObject().',
+        'Use this.computedReturnArray instead of this.computedReturnArray().',
+        'Use this.computedReturnBoolean instead of this.computedReturnBoolean().'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          data() {
+            return {
+              dataString: 'dataString',
+              dataNumber: 10,
+              dataObject: {
+                inside: "inside"
+              },
+              dataArray: [1,2,3,4,5],
+              dataBoolean: true,
+            }
+          },
+          computed: {
+            computedReturnDataString() {
+              return this.dataString
+            },
+            computedReturnDataNumber() {
+              return this.dataNumber
+            },
+            computedReturnDataObject() {
+              return this.dataObject
+            },
+            computedReturnDataArray() {
+              return this.dataArray
+            },
+            computedReturnDataBoolean() {
+              return this.dataBoolean
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnDataString()
+              this.computedReturnDataNumber()
+              this.computedReturnDataObject()
+              this.computedReturnDataArray()
+              this.computedReturnDataBoolean()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnDataString instead of this.computedReturnDataString().',
+        'Use this.computedReturnDataNumber instead of this.computedReturnDataNumber().',
+        'Use this.computedReturnDataObject instead of this.computedReturnDataObject().',
+        'Use this.computedReturnDataArray instead of this.computedReturnDataArray().',
+        'Use this.computedReturnDataBoolean instead of this.computedReturnDataBoolean().'
+      ]
     },
     {
       filename: 'test.vue',
@@ -114,24 +392,58 @@ tester.run('no-use-computed-property-like-method', rule, {
       <script>
         export default {
           props: {
-            name: {
+            propsString: {
               type: String
             },
+            propsNumber: {
+              type: Number
+            },
+            propsObject: {
+              type: Object
+            },
+            propsArray: {
+              type: Array
+            },
+            propsBoolean: {
+              type: Boolean
+            }
           },
           computed: {
-            isExpectedName() {
-              return this.name === 'name';
+            computedReturnPropsString() {
+              return this.propsString
+            },
+            computedReturnPropsNumber() {
+              return this.propsNumber
+            },
+            computedReturnPropsObject() {
+              return this.propsObject
+            },
+            computedReturnPropsArray() {
+              return this.propsArray
+            },
+            computedReturnPropsBoolean() {
+              return this.propsBoolean
             }
           },
           methods: {
-            getName() {
-              return this.isExpectedName()
+            fn() {
+              this.computedReturnPropsString()
+              this.computedReturnPropsNumber()
+              this.computedReturnPropsObject()
+              this.computedReturnPropsArray()
+              this.computedReturnPropsBoolean()
             }
           }
         }
       </script>
       `,
-      errors: ['Does not allow to use computed with this expression.']
+      errors: [
+        'Use this.computedReturnPropsString instead of this.computedReturnPropsString().',
+        'Use this.computedReturnPropsNumber instead of this.computedReturnPropsNumber().',
+        'Use this.computedReturnPropsObject instead of this.computedReturnPropsObject().',
+        'Use this.computedReturnPropsArray instead of this.computedReturnPropsArray().',
+        'Use this.computedReturnPropsBoolean instead of this.computedReturnPropsBoolean().'
+      ]
     }
   ]
 })

From f460c6f5e2163b6aaecfedefed1564a4f4b55509 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 13 Nov 2020 23:56:58 +0900
Subject: [PATCH 09/35] feat: add types to eslint utils getStaticValue

---
 typings/eslint-utils/index.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/typings/eslint-utils/index.d.ts b/typings/eslint-utils/index.d.ts
index 884fc60cd..2461179ca 100644
--- a/typings/eslint-utils/index.d.ts
+++ b/typings/eslint-utils/index.d.ts
@@ -7,6 +7,11 @@ export function findVariable(
   nameOrNode: VAST.Identifier | string
 ): eslint.Scope.Variable
 
+export function getStaticValue(
+  node: VAST.ESNode,
+  initialScope?: eslint.Scope.Scope
+): { value: any } | null
+
 export function isParenthesized(
   num: number,
   node: VAST.ESNode,

From 969120a8769a269ede7edbf38cb8774afaee8fd1 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 09:53:31 +0900
Subject: [PATCH 10/35] feat: refactor rule

---
 .../no-use-computed-property-like-method.md   | 187 +++++++++++-
 .../no-use-computed-property-like-method.js   | 108 +++----
 .../no-use-computed-property-like-method.js   | 275 +++++++++++++-----
 3 files changed, 421 insertions(+), 149 deletions(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 078ebe78e..8c5e1f14d 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -56,6 +56,44 @@ This rule disallows to use computed property like method.
       },
     },
     computed: {
+      computedReturnDataString() {
+        return this.dataString
+      },
+      computedReturnDataNumber() {
+        return this.dataNumber
+      },
+      computedReturnDataObject() {
+        return this.dataObject
+      },
+      computedReturnDataArray() {
+        return this.dataArray
+      },
+      computedReturnDataBoolean() {
+        return this.dataBoolean
+      },
+      computedReturnDataFunction() {
+        return this.dataFunction
+      },
+
+      computedReturnPropsString() {
+        return this.propsString
+      },
+      computedReturnPropsNumber() {
+        return this.propsNumber
+      },
+      computedReturnPropsObject() {
+        return this.propsObject
+      },
+      computedReturnPropsArray() {
+        return this.propsArray
+      },
+      computedReturnPropsBoolean() {
+        return this.propsBoolean
+      },
+      computedReturnPropsFunction() {
+        return this.propsFunction
+      },
+
       computedReturnString() {
         return 'computedReturnString'
       },
@@ -76,7 +114,24 @@ This rule disallows to use computed property like method.
       computedReturnFunction() {
         const fn = () => alert('computedReturnFunction')
         return fn
+      },
+
+      computedReturnMethodsReturnString() {
+        return this.methodsReturnString
+      },
+      computedReturnMethodsReturnNumber() {
+        return this.methodsReturnNumber
+      },
+      computedReturnMethodsReturnObject() {
+        return this.methodsReturnObject
+      },
+      computedReturnMethodsReturnArray() {
+        return this.methodsReturnArray
+      },
+      computedReturnMethodsReturnBoolean() {
+        return this.methodsReturnBoolean
       }
+
     },
     methods: {
       methodsReturnString() {
@@ -97,7 +152,137 @@ This rule disallows to use computed property like method.
         return true
       },
       methodsReturnFunction() {
-        console.log(this.dataObject.inside);
+        const fn = () => alert('methodsReturnFunction')
+        return fn
+      },
+
+      fn() {
+        /* Reference data */
+        /* ✓ GOOD */
+        this.computedReturnDataString
+        this.computedReturnDataNumber
+        this.computedReturnDataObject
+        this.computedReturnDataArray
+        this.computedReturnDataBoolean
+        this.computedReturnDataFunction
+        this.computedReturnDataFunction()
+        /* ✗ BAD */
+        this.computedReturnDataString()
+        this.computedReturnDataNumber()
+        this.computedReturnDataObject()
+        this.computedReturnDataArray()
+        this.computedReturnDataBoolean()
+
+        /* Reference props */
+        /* ✓ GOOD */
+        this.computedReturnPropsString
+        this.computedReturnPropsNumber
+        this.computedReturnPropsObject
+        this.computedReturnPropsArray
+        this.computedReturnPropsBoolean
+        this.computedReturnPropsFunction
+        this.computedReturnPropsFunction()
+        /* ✗ BAD */
+        this.computedReturnPropsString()
+        this.computedReturnPropsNumber()
+        this.computedReturnPropsObject()
+        this.computedReturnPropsArray()
+        this.computedReturnPropsBoolean()
+
+        /* ✓ GOOD */
+        this.computedReturnString
+        this.computedReturnNumber
+        this.computedReturnObject
+        this.computedReturnArray
+        this.computedReturnBoolean
+        this.computedReturnFunction
+        this.computedReturnFunction()
+        /* ✗ BAD */
+        this.computedReturnString()
+        this.computedReturnNumber()
+        this.computedReturnObject()
+        this.computedReturnArray()
+        this.computedReturnBoolean()
+
+        /* Reference methods */
+        /* ✓ GOOD */
+        this.computedReturnMethodsReturnString
+        this.computedReturnMethodsReturnNumber
+        this.computedReturnMethodsReturnObject
+        this.computedReturnMethodsReturnArray
+        this.computedReturnMethodsReturnBoolean
+        this.computedReturnMethodsReturnFunction
+        this.computedReturnMethodsReturnFunction()
+        /* ✗ BAD */
+        this.computedReturnMethodsReturnString()
+        this.computedReturnMethodsReturnNumber()
+        this.computedReturnMethodsReturnObject()
+        this.computedReturnMethodsReturnArray()
+        this.computedReturnMethodsReturnBoolean()
+      }
+    }
+  }
+</script>
+```
+
+This rule can't check if props is used as array:
+</eslint-code-block>
+<eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
+
+```vue
+<template>
+  <div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      "propsString",
+      "propsNumber",
+      "propsObject",
+      "propsArray",
+      "propsBoolean",
+      "propsFunction"
+    },
+    computed: {
+      computedReturnPropsString() {
+        return this.propsString
+      },
+      computedReturnPropsNumber() {
+        return this.propsNumber
+      },
+      computedReturnPropsObject() {
+        return this.propsObject
+      },
+      computedReturnPropsArray() {
+        return this.propsArray
+      },
+      computedReturnPropsBoolean() {
+        return this.propsBoolean
+      },
+      computedReturnPropsFunction() {
+        return this.propsFunction
+      },
+    },
+    methods: {
+      fn() {
+        /* Reference props */
+        /* ✓ GOOD */
+        this.computedReturnPropsString
+        this.computedReturnPropsString()
+        this.computedReturnPropsNumber
+        this.computedReturnPropsNumber()
+        this.computedReturnPropsObject
+        this.computedReturnPropsObject()
+        this.computedReturnPropsArray
+        this.computedReturnPropsArray()
+        this.computedReturnPropsBoolean
+        this.computedReturnPropsBoolean()
+        this.computedReturnPropsFunction
+        this.computedReturnPropsFunction()
+        /* ✗ BAD */
+        /* Nope. everything is GOOD!! */
       }
     }
   }
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 3ed47ab14..644fef898 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -11,8 +11,6 @@ const eslitUtils = require('eslint-utils')
 const utils = require('../utils')
 
 /**
- * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
- * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
  * @typedef {import('../utils').ComponentPropertyData} ComponentPropertyData
  * @typedef {import('../utils').ComponentObjectPropertyData} ComponentObjectPropertyData
  *
@@ -22,21 +20,6 @@ const utils = require('../utils')
 // Rule Definition
 // ------------------------------------------------------------------------------
 
-function replacer(key, value) {
-  if (key === 'parent') {
-    return undefined
-  }
-  if (key === 'errors' && Array.isArray(value)) {
-    return value.map((e) => ({
-      message: e.message,
-      index: e.index,
-      lineNumber: e.lineNumber,
-      column: e.column
-    }))
-  }
-  return value
-}
-
 /**
  *
  * @param {ComponentObjectPropertyData} property
@@ -70,32 +53,6 @@ const getComponetPropsType = (property) => {
 const getPrototypeType = (obj) =>
   Object.prototype.toString.call(obj).slice(8, -1)
 
-/**
- *
- * @param {Expression | Super} objectOrCallee
- * @returns {string | null}
- */
-// const getThisMember = (objectOrCallee) => {
-//   if (objectOrCallee.type === 'MemberExpression') {
-//     if (objectOrCallee.object.type === 'Identifier') return null
-
-//     if (
-//       objectOrCallee.object.type === 'ThisExpression' &&
-//       objectOrCallee.property.type === 'Identifier'
-//     )
-//       return objectOrCallee.property.name
-
-//     if (objectOrCallee.object.type === 'MemberExpression')
-//       getThisMember(objectOrCallee.object)
-//   }
-
-//   if (objectOrCallee.type === 'CallExpression') {
-//     if (objectOrCallee.callee.type === 'Identifier') return null
-
-//     getThisMember(objectOrCallee.callee)
-//   }
-// }
-
 /**
  * Get return type of property.
  * @param {{ property: ComponentPropertyData, propertyMap: ProprtyMap }} args
@@ -130,27 +87,13 @@ const getValueType = ({ property, propertyMap }) => {
         if (!returnStatement || returnStatement.type !== 'ReturnStatement')
           return
 
-        // if (property.groupName === 'computed') {
-        //   if (
-        //     propertyMap &&
-        //     propertyMap[property.name] &&
-        //     returnStatement.argument
-        //   ) {
-        //     const thisMember = getThisMember(returnStatement.argument)
-        //     return {
-        //       type: propertyMap[thisMember].valueType.type
-        //     }
-        //   }
-        // }
-
-        /**
-         * TODO: consider this.xxx.xxx().xxx.xxx().xxx().....
-         */
-        if (property.groupName === 'computed') {
+        if (
+          property.groupName === 'computed' &&
+          propertyMap &&
+          propertyMap[property.name] &&
+          returnStatement.argument
+        ) {
           if (
-            propertyMap &&
-            propertyMap[property.name] &&
-            returnStatement.argument &&
             returnStatement.argument.type === 'MemberExpression' &&
             returnStatement.argument.property.type === 'Identifier'
           )
@@ -161,9 +104,6 @@ const getValueType = ({ property, propertyMap }) => {
             }
 
           if (
-            propertyMap &&
-            propertyMap[property.name] &&
-            returnStatement.argument &&
             returnStatement.argument.type === 'CallExpression' &&
             returnStatement.argument.callee.type === 'MemberExpression' &&
             returnStatement.argument.callee.property.type === 'Identifier'
@@ -175,6 +115,18 @@ const getValueType = ({ property, propertyMap }) => {
             }
         }
 
+        /**
+         * Use value as Object even if object includes method
+         */
+        if (
+          property.groupName === 'computed' &&
+          returnStatement.argument.type === 'ObjectExpression'
+        ) {
+          return {
+            type: 'Object'
+          }
+        }
+
         const evaluated = eslitUtils.getStaticValue(returnStatement.argument)
 
         if (evaluated) {
@@ -223,11 +175,11 @@ module.exports = {
     const propertyMap = {}
 
     /**@type ObjectExpression */
-    let nodeMap = {}
+    let vueNodeMap = {}
 
     return utils.defineVueVisitor(context, {
       onVueObjectEnter(node) {
-        nodeMap = node
+        vueNodeMap = node
         const properties = utils.iterateProperties(node, groups)
 
         for (const property of properties) {
@@ -239,12 +191,12 @@ module.exports = {
         }
       },
 
-      /** @param {MemberExpression} node */
+      /**
+       * Re-check propertyMap's valueType.
+       * Because there is a possibility that propertyMap's member reference other propertyMap's member.
+       */
       'MemberExpression[object.type="ThisExpression"]'(node) {
-        if (node.parent.type !== 'CallExpression') return
-        if (node.property.type !== 'Identifier') return
-
-        const properties = utils.iterateProperties(nodeMap, groups)
+        const properties = utils.iterateProperties(vueNodeMap, groups)
 
         for (const property of properties) {
           propertyMap[property.name] = {
@@ -253,8 +205,16 @@ module.exports = {
             valueType: getValueType({ property, propertyMap })
           }
         }
+      },
+
+      /** @param {ThisExpression} node */
+      'ThisExpression[parent.type="MemberExpression"][parent.parent.type="CallExpression"]'(
+        node
+      ) {
+        if (node.parent.type !== 'MemberExpression') return
+        if (node.parent.property.type !== 'Identifier') return
 
-        const thisMember = node.property.name
+        const thisMember = node.parent.property.name
 
         if (!propertyMap[thisMember].valueType.type) return
 
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index 687901b7d..370454498 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -21,64 +21,6 @@ const tester = new RuleTester({
 
 tester.run('no-use-computed-property-like-method', rule, {
   valid: [
-    {
-      filename: 'test.vue',
-      code: `
-      <script>
-        export default {
-          computed: {
-            computedReturnString() {
-              return 'computedReturnString'
-            },
-            computedReturnNumber() {
-              return 10
-            },
-            computedReturnObject() {
-              return {
-                inside: "inside"
-              }
-            },
-            computedReturnArray() {
-              return [1,2,3,4,5]
-            },
-            computedReturnBoolean() {
-              return this.computedReturnArray
-            }
-          },
-          methods: {
-            fn() {
-              this.computedReturnString
-              this.computedReturnNumber
-              this.computedReturnObject
-              this.computedReturnArray
-              this.computedReturnBoolean
-            }
-          }
-        }
-      </script>
-      `
-    },
-    {
-      filename: 'test.vue',
-      code: `
-      <script>
-        export default {
-          computed: {
-            computedReturnFunction() {
-              const fn = () => alert('computedReturnFunction')
-              return fn
-            }
-          },
-          methods: {
-            fn() {
-              this.computedReturnFunction
-              this.computedReturnFunction()
-            }
-          }
-        }
-      </script>
-      `
-    },
     {
       filename: 'test.vue',
       code: `
@@ -286,9 +228,7 @@ tester.run('no-use-computed-property-like-method', rule, {
         }
       </script>
       `
-    }
-  ],
-  invalid: [
+    },
     {
       filename: 'test.vue',
       code: `
@@ -315,24 +255,116 @@ tester.run('no-use-computed-property-like-method', rule, {
           },
           methods: {
             fn() {
-              this.computedReturnString()
-              this.computedReturnNumber()
-              this.computedReturnObject()
-              this.computedReturnArray()
-              this.computedReturnBoolean()
+              this.computedReturnString
+              this.computedReturnNumber
+              this.computedReturnObject
+              this.computedReturnArray
+              this.computedReturnBoolean
             }
           }
         }
       </script>
-      `,
-      errors: [
-        'Use this.computedReturnString instead of this.computedReturnString().',
-        'Use this.computedReturnNumber instead of this.computedReturnNumber().',
-        'Use this.computedReturnObject instead of this.computedReturnObject().',
-        'Use this.computedReturnArray instead of this.computedReturnArray().',
-        'Use this.computedReturnBoolean instead of this.computedReturnBoolean().'
-      ]
+      `
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnFunction() {
+              const fn = () => alert('computedReturnFunction')
+              return fn
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnFunction
+              this.computedReturnFunction()
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnMethodsReturnString() {
+              return this.methodsReturnString
+            },
+            computedReturnMethodsReturnNumber() {
+              return this.methodsReturnNumber
+            },
+            computedReturnMethodsReturnObject() {
+              return this.methodsReturnObject
+            },
+            computedReturnMethodsReturnArray() {
+              return this.methodsReturnArray
+            },
+            computedReturnMethodsReturnBoolean() {
+              return this.methodsReturnBoolean
+            }
+          },
+          methods: {
+            methodsReturnString() {
+              return 'methodsReturnString'
+            },
+            methodsReturnNumber() {
+              return 'methodsReturnNumber'
+            },
+            methodsReturnObject() {
+              return {
+                inside: "inside"
+              }
+            },
+            methodsReturnArray() {
+              return [1,2,3,4,5]
+            },
+            methodsReturnBoolean() {
+              return true
+            },
+            fn() {
+              this.computedReturnMethodsReturnString
+              this.computedReturnMethodsReturnNumber
+              this.computedReturnMethodsReturnObject
+              this.computedReturnMethodsReturnArray
+              this.computedReturnMethodsReturnBoolean
+            }
+          }
+        }
+      </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnMethodsReturnFunction() {
+              return this.methodsReturnFunction
+            }
+          },
+          methods: {
+            methodsReturnFunction() {
+              const fn = () => alert('methodsReturnFunction')
+              return fn
+            },
+            fn() {
+              this.computedReturnMethodsReturnFunction
+              this.computedReturnMethodsReturnFunction()
+            }
+          }
+        }
+      </script>
+      `
+    }
+  ],
+  invalid: [
     {
       filename: 'test.vue',
       code: `
@@ -444,6 +476,101 @@ tester.run('no-use-computed-property-like-method', rule, {
         'Use this.computedReturnPropsArray instead of this.computedReturnPropsArray().',
         'Use this.computedReturnPropsBoolean instead of this.computedReturnPropsBoolean().'
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnString() {
+              return 'computedReturnString'
+            },
+            computedReturnNumber() {
+              return 10
+            },
+            computedReturnObject() {
+              return {
+                inside: "inside"
+              }
+            },
+            computedReturnArray() {
+              return [1,2,3,4,5]
+            },
+            computedReturnBoolean() {
+              return true
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnString()
+              this.computedReturnNumber()
+              this.computedReturnObject()
+              this.computedReturnArray()
+              this.computedReturnBoolean()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnString instead of this.computedReturnString().',
+        'Use this.computedReturnNumber instead of this.computedReturnNumber().',
+        'Use this.computedReturnObject instead of this.computedReturnObject().',
+        'Use this.computedReturnArray instead of this.computedReturnArray().',
+        'Use this.computedReturnBoolean instead of this.computedReturnBoolean().'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnString() {
+              return 'computedReturnString'
+            },
+            computedReturnComputedReturnString() {
+              return this.computedReturnString
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnComputedReturnString()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnComputedReturnString instead of this.computedReturnComputedReturnString().'
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnObject() {
+              return {
+                insideFn() {
+                  return "insideFn"
+                }
+              }
+            },
+          },
+          methods: {
+            fn() {
+              this.computedReturnObject().insideFn
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnObject instead of this.computedReturnObject().'
+      ]
     }
   ]
 })

From 7ce7a03691635429ada992a16a78430028335781 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 09:58:06 +0900
Subject: [PATCH 11/35] docs: fix docs

---
 docs/rules/no-use-computed-property-like-method.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 8c5e1f14d..73f5573bb 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -225,8 +225,10 @@ This rule disallows to use computed property like method.
 </script>
 ```
 
-This rule can't check if props is used as array:
 </eslint-code-block>
+
+This rule can't check if props is used as array:
+
 <eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
 
 ```vue

From cc7cde45d4c4eab57bc1b4ddf7c046b61d833b74 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:05:25 +0900
Subject: [PATCH 12/35] docs: fix docs

---
 docs/rules/no-use-computed-property-like-method.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 73f5573bb..67c5948c9 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -239,14 +239,14 @@ This rule can't check if props is used as array:
 
 <script>
   export default {
-    props: {
+    props: [
       "propsString",
       "propsNumber",
       "propsObject",
       "propsArray",
       "propsBoolean",
       "propsFunction"
-    },
+    ],
     computed: {
       computedReturnPropsString() {
         return this.propsString

From 62b82beae63f7e9ac0cdd5bfedec39de8381b832 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:08:34 +0900
Subject: [PATCH 13/35] feat: change report node

---
 lib/rules/no-use-computed-property-like-method.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 644fef898..28ceb69b4 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -223,8 +223,8 @@ module.exports = {
           propertyMap[thisMember].valueType.type !== 'Function'
         ) {
           context.report({
-            node,
-            loc: node.loc,
+            node: node.parent,
+            loc: node.parent.loc,
             messageId: 'unexpected',
             data: {
               likeProperty: `this.${thisMember}`,

From c614b6de7c9ca60d504446d32e3ce91013b2989b Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:10:07 +0900
Subject: [PATCH 14/35] chore: remove unused file

---
 .tool-versions | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
deleted file mode 100644
index dfaa2aed4..000000000
--- a/.tool-versions
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 12.18.0

From 13eff80fd68298d7f45609f9a27b86790f7cf3b3 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:24:00 +0900
Subject: [PATCH 15/35] refactor: improve JSDoc

---
 lib/rules/no-use-computed-property-like-method.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 28ceb69b4..3faff6641 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -55,7 +55,8 @@ const getPrototypeType = (obj) =>
 
 /**
  * Get return type of property.
- * @param {{ property: ComponentPropertyData, propertyMap: ProprtyMap }} args
+ * @param {{ property: ComponentPropertyData, propertyMap?: ProprtyMap }} args
+ * @returns {{type: string | null}}
  */
 const getValueType = ({ property, propertyMap }) => {
   if (property.type === 'array') {
@@ -144,10 +145,9 @@ const getValueType = ({ property, propertyMap }) => {
         type: getPrototypeType(evaluated.value)
       }
     }
-
-    return {
-      type: null
-    }
+  }
+  return {
+    type: null
   }
 }
 

From 01c4f847e829a0cda01c07dcf63b3c5e0ebc58ff Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:29:57 +0900
Subject: [PATCH 16/35] docs: remove template

---
 .tool-versions                                     |  1 +
 docs/rules/no-use-computed-property-like-method.md | 10 ----------
 2 files changed, 1 insertion(+), 10 deletions(-)
 create mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 000000000..dfaa2aed4
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 12.18.0
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 67c5948c9..23753fbfd 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -14,11 +14,6 @@ This rule disallows to use computed property like method.
 <eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
 
 ```vue
-<template>
-  <div>
-  </div>
-</template>
-
 <script>
   export default {
     data() {
@@ -232,11 +227,6 @@ This rule can't check if props is used as array:
 <eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
 
 ```vue
-<template>
-  <div>
-  </div>
-</template>
-
 <script>
   export default {
     props: [

From 9c541588d9ca3eb267691089c38ab8924cbdf451 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:40:31 +0900
Subject: [PATCH 17/35] docs: fix docs

---
 .tool-versions                                     | 1 -
 docs/rules/no-use-computed-property-like-method.md | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)
 delete mode 100644 .tool-versions

diff --git a/.tool-versions b/.tool-versions
deleted file mode 100644
index dfaa2aed4..000000000
--- a/.tool-versions
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 12.18.0
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 23753fbfd..3c8ddf763 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -126,6 +126,9 @@ This rule disallows to use computed property like method.
       computedReturnMethodsReturnBoolean() {
         return this.methodsReturnBoolean
       }
+      computedReturnMethodsReturnFunction() {
+        return this.methodsReturnFunction
+      }
 
     },
     methods: {

From 00dc589c911518fc0b77660a12332b5e33b1fea9 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 10:44:19 +0900
Subject: [PATCH 18/35] docs: fix docs

---
 docs/rules/no-use-computed-property-like-method.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 3c8ddf763..438c849e1 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -125,7 +125,7 @@ This rule disallows to use computed property like method.
       },
       computedReturnMethodsReturnBoolean() {
         return this.methodsReturnBoolean
-      }
+      },
       computedReturnMethodsReturnFunction() {
         return this.methodsReturnFunction
       }

From 78c203dd4f05cce61b60566d80fee87c555486b8 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 14 Nov 2020 14:05:11 +0900
Subject: [PATCH 19/35] feat: change target node

---
 lib/rules/no-use-computed-property-like-method.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 3faff6641..7e6cff6a5 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -223,8 +223,8 @@ module.exports = {
           propertyMap[thisMember].valueType.type !== 'Function'
         ) {
           context.report({
-            node: node.parent,
-            loc: node.parent.loc,
+            node: node.parent.parent,
+            loc: node.parent.parent.loc,
             messageId: 'unexpected',
             data: {
               likeProperty: `this.${thisMember}`,

From 96fecb19554a1c4dfd441226c619cd52260db035 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Fri, 4 Dec 2020 18:23:52 +0900
Subject: [PATCH 20/35] feat: rename getComponentPropsType

---
 lib/rules/no-use-computed-property-like-method.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 7e6cff6a5..1ee69abfd 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -25,7 +25,7 @@ const utils = require('../utils')
  * @param {ComponentObjectPropertyData} property
  * @return {string | null}
  */
-const getComponetPropsType = (property) => {
+const getComponentPropsType = (property) => {
   if (property.property.value.type === 'ObjectExpression') {
     const propsTypeProperty = property.property.value.properties.find(
       (property) =>
@@ -68,7 +68,7 @@ const getValueType = ({ property, propertyMap }) => {
   if (property.type === 'object') {
     if (property.groupName === 'props') {
       return {
-        type: getComponetPropsType(property)
+        type: getComponentPropsType(property)
       }
     }
 

From 330d18867fcc5de3389146fdb5e5fdda4a8b23f6 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sun, 2 May 2021 21:55:53 +0900
Subject: [PATCH 21/35] rename eslint

---
 lib/rules/no-use-computed-property-like-method.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 1ee69abfd..558dee375 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -7,7 +7,7 @@
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
-const eslitUtils = require('eslint-utils')
+const eslintUtils = require('eslint-utils')
 const utils = require('../utils')
 
 /**
@@ -128,7 +128,7 @@ const getValueType = ({ property, propertyMap }) => {
           }
         }
 
-        const evaluated = eslitUtils.getStaticValue(returnStatement.argument)
+        const evaluated = eslintUtils.getStaticValue(returnStatement.argument)
 
         if (evaluated) {
           return {
@@ -138,7 +138,7 @@ const getValueType = ({ property, propertyMap }) => {
       }
     }
 
-    const evaluated = eslitUtils.getStaticValue(property.property.value)
+    const evaluated = eslintUtils.getStaticValue(property.property.value)
 
     if (evaluated) {
       return {

From 11b7ef19f7c7c6e7797734bb823410e40b150193 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sun, 2 May 2021 21:57:15 +0900
Subject: [PATCH 22/35] refactor: rename PropertyMap

---
 lib/rules/no-use-computed-property-like-method.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 558dee375..a135d2445 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -14,7 +14,7 @@ const utils = require('../utils')
  * @typedef {import('../utils').ComponentPropertyData} ComponentPropertyData
  * @typedef {import('../utils').ComponentObjectPropertyData} ComponentObjectPropertyData
  *
- * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string } }}} ProprtyMap
+ * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string } }}} PropertyMap
  */
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -55,7 +55,7 @@ const getPrototypeType = (obj) =>
 
 /**
  * Get return type of property.
- * @param {{ property: ComponentPropertyData, propertyMap?: ProprtyMap }} args
+ * @param {{ property: ComponentPropertyData, propertyMap?: PropertyMap }} args
  * @returns {{type: string | null}}
  */
 const getValueType = ({ property, propertyMap }) => {
@@ -171,7 +171,7 @@ module.exports = {
     const GROUP_NAMES = ['data', 'props', 'computed', 'methods']
     const groups = new Set(GROUP_NAMES)
 
-    /** @type ProprtyMap */
+    /** @type PropertyMap */
     const propertyMap = {}
 
     /**@type ObjectExpression */

From 8b825e5370d82b4bd871450e34d01b475b4f49d8 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sun, 2 May 2021 22:02:58 +0900
Subject: [PATCH 23/35] refactor: improve if statement

---
 lib/rules/no-use-computed-property-like-method.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index a135d2445..13e639333 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -37,10 +37,7 @@ const getComponentPropsType = (property) => {
 
     if (propsTypeProperty === undefined) return null
 
-    if (
-      propsTypeProperty.type === 'Property' &&
-      propsTypeProperty.value.type === 'Identifier'
-    )
+    if (propsTypeProperty.value.type === 'Identifier')
       return propsTypeProperty.value.name
   }
   return null

From 2e316f8dbba4dea7f6a00ed203f998c5d4dfad57 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sun, 2 May 2021 22:48:07 +0900
Subject: [PATCH 24/35] Revert "refactor: improve if statement"

This reverts commit 8b825e5370d82b4bd871450e34d01b475b4f49d8.
---
 lib/rules/no-use-computed-property-like-method.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 13e639333..a135d2445 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -37,7 +37,10 @@ const getComponentPropsType = (property) => {
 
     if (propsTypeProperty === undefined) return null
 
-    if (propsTypeProperty.value.type === 'Identifier')
+    if (
+      propsTypeProperty.type === 'Property' &&
+      propsTypeProperty.value.type === 'Identifier'
+    )
       return propsTypeProperty.value.name
   }
   return null

From d8a8af9016bc0b52cd273d27f77d6c5894f928bb Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sun, 2 May 2021 23:59:24 +0900
Subject: [PATCH 25/35] feat: consider basic props type

---
 .../no-use-computed-property-like-method.md   | 519 ++++++++++--------
 .../no-use-computed-property-like-method.js   |  29 +-
 .../no-use-computed-property-like-method.js   |  91 +++
 3 files changed, 395 insertions(+), 244 deletions(-)

diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 438c849e1..224e6cf80 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -4,222 +4,265 @@ sidebarDepth: 0
 title: vue/no-use-computed-property-like-method
 description: disallow use computed property like method
 ---
+
 # vue/no-use-computed-property-like-method
+
 > disallow use computed property like method
 
 ## :book: Rule Details
 
-This rule disallows to use computed property like method.  
+This rule disallows to use computed property like method.
 
 <eslint-code-block :rules="{'vue/no-use-computed-property-like-method': ['error']}">
 
 ```vue
 <script>
-  export default {
-    data() {
-      return {
-        dataString: 'dataString',
-        dataNumber: 10,
-        dataObject: {
-          inside: "inside"
-        },
-        dataArray: [1,2,3,4,5],
-        dataBoolean: true,
-        dataFunction() {
-          alert('dataFunction')
-        }
+export default {
+  data() {
+    return {
+      dataString: 'dataString',
+      dataNumber: 10,
+      dataObject: {
+        inside: 'inside'
+      },
+      dataArray: [1, 2, 3, 4, 5],
+      dataBoolean: true,
+      dataFunction() {
+        alert('dataFunction')
       }
+    }
+  },
+  props: {
+    propsString: String,
+    propsNumber: Number,
+    propsObject: Object,
+    propsArray: Array,
+    propsBoolean: Boolean,
+    propsFunction: Function,
+
+    objectPropsString: {
+      type: String
     },
-    props: {
-      propsString: {
-        type: String
-      },
-      propsNumber: {
-        type: Number
-      },
-      propsObject: {
-        type: Object
-      },
-      propsArray: {
-        type: Array
-      },
-      propsBoolean: {
-        type: Boolean
-      },
-      propsFunction: {
-        type: Function
-      },
+    objectPropsNumber: {
+      type: Number
+    },
+    objectPropsObject: {
+      type: Object
+    },
+    objectPropsArray: {
+      type: Array
+    },
+    objectPropsBoolean: {
+      type: Boolean
+    },
+    objectPropsFunction: {
+      type: Function
+    }
+  },
+  computed: {
+    computedReturnDataString() {
+      return this.dataString
+    },
+    computedReturnDataNumber() {
+      return this.dataNumber
+    },
+    computedReturnDataObject() {
+      return this.dataObject
+    },
+    computedReturnDataArray() {
+      return this.dataArray
+    },
+    computedReturnDataBoolean() {
+      return this.dataBoolean
+    },
+    computedReturnDataFunction() {
+      return this.dataFunction
     },
-    computed: {
-      computedReturnDataString() {
-        return this.dataString
-      },
-      computedReturnDataNumber() {
-        return this.dataNumber
-      },
-      computedReturnDataObject() {
-        return this.dataObject
-      },
-      computedReturnDataArray() {
-        return this.dataArray
-      },
-      computedReturnDataBoolean() {
-        return this.dataBoolean
-      },
-      computedReturnDataFunction() {
-        return this.dataFunction
-      },
 
-      computedReturnPropsString() {
-        return this.propsString
-      },
-      computedReturnPropsNumber() {
-        return this.propsNumber
-      },
-      computedReturnPropsObject() {
-        return this.propsObject
-      },
-      computedReturnPropsArray() {
-        return this.propsArray
-      },
-      computedReturnPropsBoolean() {
-        return this.propsBoolean
-      },
-      computedReturnPropsFunction() {
-        return this.propsFunction
-      },
+    computedReturnPropsString() {
+      return this.propsString
+    },
+    computedReturnPropsNumber() {
+      return this.propsNumber
+    },
+    computedReturnPropsObject() {
+      return this.propsObject
+    },
+    computedReturnPropsArray() {
+      return this.propsArray
+    },
+    computedReturnPropsBoolean() {
+      return this.propsBoolean
+    },
+    computedReturnPropsFunction() {
+      return this.propsFunction
+    },
 
-      computedReturnString() {
-        return 'computedReturnString'
-      },
-      computedReturnNumber() {
-        return 10
-      },
-      computedReturnObject() {
-        return {
-          inside: "inside"
-        }
-      },
-      computedReturnArray() {
-        return [1,2,3,4,5]
-      },
-      computedReturnBoolean() {
-        return true
-      },
-      computedReturnFunction() {
-        const fn = () => alert('computedReturnFunction')
-        return fn
-      },
+    computedReturnObjectPropsString() {
+      return this.objectPropsString
+    },
+    computedReturnObjectPropsNumber() {
+      return this.objectPropsNumber
+    },
+    computedReturnObjectPropsObject() {
+      return this.objectPropsObject
+    },
+    computedReturnObjectPropsArray() {
+      return this.objectPropsArray
+    },
+    computedReturnObjectPropsBoolean() {
+      return this.objectPropsBoolean
+    },
+    computedReturnObjectPropsFunction() {
+      return this.objectPropsFunction
+    },
 
-      computedReturnMethodsReturnString() {
-        return this.methodsReturnString
-      },
-      computedReturnMethodsReturnNumber() {
-        return this.methodsReturnNumber
-      },
-      computedReturnMethodsReturnObject() {
-        return this.methodsReturnObject
-      },
-      computedReturnMethodsReturnArray() {
-        return this.methodsReturnArray
-      },
-      computedReturnMethodsReturnBoolean() {
-        return this.methodsReturnBoolean
-      },
-      computedReturnMethodsReturnFunction() {
-        return this.methodsReturnFunction
+    computedReturnString() {
+      return 'computedReturnString'
+    },
+    computedReturnNumber() {
+      return 10
+    },
+    computedReturnObject() {
+      return {
+        inside: 'inside'
       }
+    },
+    computedReturnArray() {
+      return [1, 2, 3, 4, 5]
+    },
+    computedReturnBoolean() {
+      return true
+    },
+    computedReturnFunction() {
+      const fn = () => alert('computedReturnFunction')
+      return fn
+    },
 
+    computedReturnMethodsReturnString() {
+      return this.methodsReturnString
+    },
+    computedReturnMethodsReturnNumber() {
+      return this.methodsReturnNumber
+    },
+    computedReturnMethodsReturnObject() {
+      return this.methodsReturnObject
+    },
+    computedReturnMethodsReturnArray() {
+      return this.methodsReturnArray
+    },
+    computedReturnMethodsReturnBoolean() {
+      return this.methodsReturnBoolean
+    },
+    computedReturnMethodsReturnFunction() {
+      return this.methodsReturnFunction
+    }
+  },
+  methods: {
+    methodsReturnString() {
+      return 'methodsReturnString'
+    },
+    methodsReturnNumber() {
+      return 'methodsReturnNumber'
+    },
+    methodsReturnObject() {
+      return {
+        inside: 'inside'
+      }
+    },
+    methodsReturnArray() {
+      return [1, 2, 3, 4, 5]
+    },
+    methodsReturnBoolean() {
+      return true
+    },
+    methodsReturnFunction() {
+      const fn = () => alert('methodsReturnFunction')
+      return fn
     },
-    methods: {
-      methodsReturnString() {
-        return 'methodsReturnString'
-      },
-      methodsReturnNumber() {
-        return 'methodsReturnNumber'
-      },
-      methodsReturnObject() {
-        return {
-          inside: "inside"
-        }
-      },
-      methodsReturnArray() {
-        return [1,2,3,4,5]
-      },
-      methodsReturnBoolean() {
-        return true
-      },
-      methodsReturnFunction() {
-        const fn = () => alert('methodsReturnFunction')
-        return fn
-      },
 
-      fn() {
-        /* Reference data */
-        /* ✓ GOOD */
-        this.computedReturnDataString
-        this.computedReturnDataNumber
-        this.computedReturnDataObject
-        this.computedReturnDataArray
-        this.computedReturnDataBoolean
-        this.computedReturnDataFunction
-        this.computedReturnDataFunction()
-        /* ✗ BAD */
-        this.computedReturnDataString()
-        this.computedReturnDataNumber()
-        this.computedReturnDataObject()
-        this.computedReturnDataArray()
-        this.computedReturnDataBoolean()
+    fn() {
+      /* Reference data */
+      /* ✓ GOOD */
+      this.computedReturnDataString
+      this.computedReturnDataNumber
+      this.computedReturnDataObject
+      this.computedReturnDataArray
+      this.computedReturnDataBoolean
+      this.computedReturnDataFunction
+      this.computedReturnDataFunction()
+      /* ✗ BAD */
+      this.computedReturnDataString()
+      this.computedReturnDataNumber()
+      this.computedReturnDataObject()
+      this.computedReturnDataArray()
+      this.computedReturnDataBoolean()
 
-        /* Reference props */
-        /* ✓ GOOD */
-        this.computedReturnPropsString
-        this.computedReturnPropsNumber
-        this.computedReturnPropsObject
-        this.computedReturnPropsArray
-        this.computedReturnPropsBoolean
-        this.computedReturnPropsFunction
-        this.computedReturnPropsFunction()
-        /* ✗ BAD */
-        this.computedReturnPropsString()
-        this.computedReturnPropsNumber()
-        this.computedReturnPropsObject()
-        this.computedReturnPropsArray()
-        this.computedReturnPropsBoolean()
+      /* Reference props */
+      /* ✓ GOOD */
+      this.computedReturnPropsString
+      this.computedReturnPropsNumber
+      this.computedReturnPropsObject
+      this.computedReturnPropsArray
+      this.computedReturnPropsBoolean
+      this.computedReturnPropsFunction
+      this.computedReturnPropsFunction()
+      /* ✗ BAD */
+      this.computedReturnPropsString()
+      this.computedReturnPropsNumber()
+      this.computedReturnPropsObject()
+      this.computedReturnPropsArray()
+      this.computedReturnPropsBoolean()
 
-        /* ✓ GOOD */
-        this.computedReturnString
-        this.computedReturnNumber
-        this.computedReturnObject
-        this.computedReturnArray
-        this.computedReturnBoolean
-        this.computedReturnFunction
-        this.computedReturnFunction()
-        /* ✗ BAD */
-        this.computedReturnString()
-        this.computedReturnNumber()
-        this.computedReturnObject()
-        this.computedReturnArray()
-        this.computedReturnBoolean()
+      /* ✓ GOOD */
+      this.computedReturnObjectPropsString
+      this.computedReturnObjectPropsNumber
+      this.computedReturnObjectPropsObject
+      this.computedReturnObjectPropsArray
+      this.computedReturnObjectPropsBoolean
+      this.computedReturnObjectPropsFunction
+      this.computedReturnObjectPropsFunction()
+      /* ✗ BAD */
+      this.computedReturnObjectPropsString()
+      this.computedReturnObjectPropsNumber()
+      this.computedReturnObjectPropsObject()
+      this.computedReturnObjectPropsArray()
+      this.computedReturnObjectPropsBoolean()
 
-        /* Reference methods */
-        /* ✓ GOOD */
-        this.computedReturnMethodsReturnString
-        this.computedReturnMethodsReturnNumber
-        this.computedReturnMethodsReturnObject
-        this.computedReturnMethodsReturnArray
-        this.computedReturnMethodsReturnBoolean
-        this.computedReturnMethodsReturnFunction
-        this.computedReturnMethodsReturnFunction()
-        /* ✗ BAD */
-        this.computedReturnMethodsReturnString()
-        this.computedReturnMethodsReturnNumber()
-        this.computedReturnMethodsReturnObject()
-        this.computedReturnMethodsReturnArray()
-        this.computedReturnMethodsReturnBoolean()
-      }
+      /* Reference computed */
+      /* ✓ GOOD */
+      this.computedReturnString
+      this.computedReturnNumber
+      this.computedReturnObject
+      this.computedReturnArray
+      this.computedReturnBoolean
+      this.computedReturnFunction
+      this.computedReturnFunction()
+      /* ✗ BAD */
+      this.computedReturnString()
+      this.computedReturnNumber()
+      this.computedReturnObject()
+      this.computedReturnArray()
+      this.computedReturnBoolean()
+
+      /* Reference methods */
+      /* ✓ GOOD */
+      this.computedReturnMethodsReturnString
+      this.computedReturnMethodsReturnNumber
+      this.computedReturnMethodsReturnObject
+      this.computedReturnMethodsReturnArray
+      this.computedReturnMethodsReturnBoolean
+      this.computedReturnMethodsReturnFunction
+      this.computedReturnMethodsReturnFunction()
+      /* ✗ BAD */
+      this.computedReturnMethodsReturnString()
+      this.computedReturnMethodsReturnNumber()
+      this.computedReturnMethodsReturnObject()
+      this.computedReturnMethodsReturnArray()
+      this.computedReturnMethodsReturnBoolean()
     }
   }
+}
 </script>
 ```
 
@@ -231,56 +274,56 @@ This rule can't check if props is used as array:
 
 ```vue
 <script>
-  export default {
-    props: [
-      "propsString",
-      "propsNumber",
-      "propsObject",
-      "propsArray",
-      "propsBoolean",
-      "propsFunction"
-    ],
-    computed: {
-      computedReturnPropsString() {
-        return this.propsString
-      },
-      computedReturnPropsNumber() {
-        return this.propsNumber
-      },
-      computedReturnPropsObject() {
-        return this.propsObject
-      },
-      computedReturnPropsArray() {
-        return this.propsArray
-      },
-      computedReturnPropsBoolean() {
-        return this.propsBoolean
-      },
-      computedReturnPropsFunction() {
-        return this.propsFunction
-      },
+export default {
+  props: [
+    'propsString',
+    'propsNumber',
+    'propsObject',
+    'propsArray',
+    'propsBoolean',
+    'propsFunction'
+  ],
+  computed: {
+    computedReturnPropsString() {
+      return this.propsString
     },
-    methods: {
-      fn() {
-        /* Reference props */
-        /* ✓ GOOD */
-        this.computedReturnPropsString
-        this.computedReturnPropsString()
-        this.computedReturnPropsNumber
-        this.computedReturnPropsNumber()
-        this.computedReturnPropsObject
-        this.computedReturnPropsObject()
-        this.computedReturnPropsArray
-        this.computedReturnPropsArray()
-        this.computedReturnPropsBoolean
-        this.computedReturnPropsBoolean()
-        this.computedReturnPropsFunction
-        this.computedReturnPropsFunction()
-        /* ✗ BAD */
-        /* Nope. everything is GOOD!! */
-      }
+    computedReturnPropsNumber() {
+      return this.propsNumber
+    },
+    computedReturnPropsObject() {
+      return this.propsObject
+    },
+    computedReturnPropsArray() {
+      return this.propsArray
+    },
+    computedReturnPropsBoolean() {
+      return this.propsBoolean
+    },
+    computedReturnPropsFunction() {
+      return this.propsFunction
+    }
+  },
+  methods: {
+    fn() {
+      /* Reference props */
+      /* ✓ GOOD */
+      this.computedReturnPropsString
+      this.computedReturnPropsString()
+      this.computedReturnPropsNumber
+      this.computedReturnPropsNumber()
+      this.computedReturnPropsObject
+      this.computedReturnPropsObject()
+      this.computedReturnPropsArray
+      this.computedReturnPropsArray()
+      this.computedReturnPropsBoolean
+      this.computedReturnPropsBoolean()
+      this.computedReturnPropsFunction
+      this.computedReturnPropsFunction()
+      /* ✗ BAD */
+      /* Nope. everything is GOOD!! */
     }
   }
+}
 </script>
 ```
 
diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index a135d2445..a85a55193 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -21,13 +21,30 @@ const utils = require('../utils')
 // ------------------------------------------------------------------------------
 
 /**
- *
+ * Get type of props item.
  * @param {ComponentObjectPropertyData} property
  * @return {string | null}
+ *
+ * @example
+ * props: {
+ *   propA: String, // => String
+ *   propB: {
+ *     type: Number // => String
+ *   },
+ * }
  */
 const getComponentPropsType = (property) => {
+  /**
+   * Check basic props `props: { basicProps: ... }`
+   */
+  if (property.property.value.type === 'Identifier') {
+    return property.property.value.name
+  }
+  /**
+   * Check object props `props: { objectProps: {...} }`
+   */
   if (property.property.value.type === 'ObjectExpression') {
-    const propsTypeProperty = property.property.value.properties.find(
+    const propsIncludeTypeProperty = property.property.value.properties.find(
       (property) =>
         property.type === 'Property' &&
         property.key.type === 'Identifier' &&
@@ -35,13 +52,13 @@ const getComponentPropsType = (property) => {
         property.value.type === 'Identifier'
     )
 
-    if (propsTypeProperty === undefined) return null
+    if (propsIncludeTypeProperty === undefined) return null
 
     if (
-      propsTypeProperty.type === 'Property' &&
-      propsTypeProperty.value.type === 'Identifier'
+      propsIncludeTypeProperty.type === 'Property' &&
+      propsIncludeTypeProperty.value.type === 'Identifier'
     )
-      return propsTypeProperty.value.name
+      return propsIncludeTypeProperty.value.name
   }
   return null
 }
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index 370454498..f0d54e9a2 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -94,6 +94,48 @@ tester.run('no-use-computed-property-like-method', rule, {
       </script>
       `
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsString: String,
+            propsNumber: Number,
+            propsObject: Object,
+            propsArray: Array,
+            propsBoolean: Boolean
+          },
+          computed: {
+            computedReturnPropsString() {
+              return this.propsString
+            },
+            computedReturnPropsNumber() {
+              return this.propsNumber
+            },
+            computedReturnPropsObject() {
+              return this.propsObject
+            },
+            computedReturnPropsArray() {
+              return this.propsArray
+            },
+            computedReturnPropsBoolean() {
+              return this.propsBoolean
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsString
+              this.computedReturnPropsNumber
+              this.computedReturnPropsObject
+              this.computedReturnPropsArray
+              this.computedReturnPropsBoolean
+            }
+          }
+        }
+      </script>
+      `
+    },
     {
       filename: 'test.vue',
       code: `
@@ -418,6 +460,55 @@ tester.run('no-use-computed-property-like-method', rule, {
         'Use this.computedReturnDataBoolean instead of this.computedReturnDataBoolean().'
       ]
     },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          props: {
+            propsString: String,
+            propsNumber: Number,
+            propsObject: Object,
+            propsArray: Array,
+            propsBoolean: Boolean
+          },
+          computed: {
+            computedReturnPropsString() {
+              return this.propsString
+            },
+            computedReturnPropsNumber() {
+              return this.propsNumber
+            },
+            computedReturnPropsObject() {
+              return this.propsObject
+            },
+            computedReturnPropsArray() {
+              return this.propsArray
+            },
+            computedReturnPropsBoolean() {
+              return this.propsBoolean
+            }
+          },
+          methods: {
+            fn() {
+              this.computedReturnPropsString()
+              this.computedReturnPropsNumber()
+              this.computedReturnPropsObject()
+              this.computedReturnPropsArray()
+              this.computedReturnPropsBoolean()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnPropsString instead of this.computedReturnPropsString().',
+        'Use this.computedReturnPropsNumber instead of this.computedReturnPropsNumber().',
+        'Use this.computedReturnPropsObject instead of this.computedReturnPropsObject().',
+        'Use this.computedReturnPropsArray instead of this.computedReturnPropsArray().',
+        'Use this.computedReturnPropsBoolean instead of this.computedReturnPropsBoolean().'
+      ]
+    },
     {
       filename: 'test.vue',
       code: `

From 986648b4d0f95e1abc9ae8672bd886b99e7a617e Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Mon, 3 May 2021 00:02:52 +0900
Subject: [PATCH 26/35] chore: run update

---
 docs/rules/README.md                          | 533 +++++++++---------
 .../no-use-computed-property-like-method.md   |   3 +-
 docs/rules/object-curly-newline.md            |   4 +-
 3 files changed, 271 insertions(+), 269 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 9b600d274..3d12c9fdf 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -7,9 +7,10 @@ sidebarDepth: 0
 <!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
 
 ::: tip Legend
-:wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
+  :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.
 :::
 
+
 ## Base Rules (Enabling Correct ESLint Parsing)
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
@@ -20,11 +21,11 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                                   | Description                                                             |     |
-| :------------------------------------------------------------------------ | :---------------------------------------------------------------------- | :-- |
-| [vue/comment-directive](./comment-directive.md)                           | support comment-directives in `<template>`                              |     |
-| [vue/experimental-script-setup-vars](./experimental-script-setup-vars.md) | prevent variables defined in `<script setup>` to be marked as undefined |     |
-| [vue/jsx-uses-vars](./jsx-uses-vars.md)                                   | prevent variables used in JSX to be marked as unused                    |     |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  |
+| [vue/experimental-script-setup-vars](./experimental-script-setup-vars.md) | prevent variables defined in `<script setup>` to be marked as undefined |  |
+| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  |
 
 ## Priority A: Essential (Error Prevention) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
 
@@ -36,71 +37,71 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                                                   | Description                                                                                  |          |
-| :---------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :------- |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md)                       | disallow using arrow functions to define watcher                                             |          |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md)               | disallow asynchronous actions in computed properties                                         |          |
-| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md)   | disallow using deprecated object declaration on data (in Vue.js 3.0.0+)                      | :wrench: |
-| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md)           | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) |          |
-| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md)         | disallow using deprecated `$listeners` (in Vue.js 3.0.0+)                                    |          |
-| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md)     | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)                                  | :wrench: |
-| [vue/no-deprecated-events-api](./no-deprecated-events-api.md)                             | disallow using deprecated events api (in Vue.js 3.0.0+)                                      |          |
-| [vue/no-deprecated-filter](./no-deprecated-filter.md)                                     | disallow using deprecated filters syntax (in Vue.js 3.0.0+)                                  |          |
-| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md)           | disallow using deprecated the `functional` template (in Vue.js 3.0.0+)                       |          |
-| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md)                   | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)             |          |
-| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md)                   | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)                     |          |
-| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md)             | disallow props default function `this` access                                                |          |
-| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md)                   | disallow deprecated `scope` attribute (in Vue.js 2.5.0+)                                     | :wrench: |
-| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md)                     | disallow deprecated `slot` attribute (in Vue.js 2.6.0+)                                      | :wrench: |
-| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md)         | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)                                | :wrench: |
-| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md)                           | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)         | :wrench: |
-| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md)         | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)                             |          |
-| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md)       | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)                      | :wrench: |
-| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md)           | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)                           |          |
-| [vue/no-dupe-keys](./no-dupe-keys.md)                                                     | disallow duplication of field names                                                          |          |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md)                                           | disallow duplicate conditions in `v-if` / `v-else-if` chains                                 |          |
-| [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                     | :wrench: |
-| [vue/no-reserved-keys](./no-reserved-keys.md)                                             | disallow overwriting reserved keys                                                           |          |
-| [vue/no-setup-props-destructure](./no-setup-props-destructure.md)                         | disallow destructuring of `props` passed to `setup`                                          |          |
-| [vue/no-shared-component-data](./no-shared-component-data.md)                             | enforce component's data property to be a function                                           | :wrench: |
-| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties                                                 |          |
-| [vue/no-template-key](./no-template-key.md)                                               | disallow `key` attribute on `<template>`                                                     |          |
-| [vue/no-textarea-mustache](./no-textarea-mustache.md)                                     | disallow mustaches in `<textarea>`                                                           |          |
-| [vue/no-unused-components](./no-unused-components.md)                                     | disallow registering components that are not used inside templates                           |          |
-| [vue/no-unused-vars](./no-unused-vars.md)                                                 | disallow unused variable definitions of v-for directives or scope attributes                 |          |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md)                                 | disallow use v-if on the same element as v-for                                               |          |
-| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md)                 | disallow key of `<template v-for>` placed on child elements                                  |          |
-| [vue/no-watch-after-await](./no-watch-after-await.md)                                     | disallow asynchronously registered `watch`                                                   |          |
-| [vue/require-component-is](./require-component-is.md)                                     | require `v-bind:is` of `<component>` elements                                                |          |
-| [vue/require-prop-type-constructor](./require-prop-type-constructor.md)                   | require prop type to be a constructor                                                        | :wrench: |
-| [vue/require-render-return](./require-render-return.md)                                   | enforce render function to always return value                                               |          |
-| [vue/require-slots-as-functions](./require-slots-as-functions.md)                         | enforce properties of `$slots` to be used as a function                                      |          |
-| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md)             | require control the display of the content inside `<transition>`                             |          |
-| [vue/require-v-for-key](./require-v-for-key.md)                                           | require `v-bind:key` with `v-for` directives                                                 |          |
-| [vue/require-valid-default-prop](./require-valid-default-prop.md)                         | enforce props default values to be valid                                                     |          |
-| [vue/return-in-computed-property](./return-in-computed-property.md)                       | enforce that a return statement is present in computed property                              |          |
-| [vue/return-in-emits-validator](./return-in-emits-validator.md)                           | enforce that a return statement is present in emits validator                                |          |
-| [vue/use-v-on-exact](./use-v-on-exact.md)                                                 | enforce usage of `exact` modifier on `v-on`                                                  |          |
-| [vue/valid-template-root](./valid-template-root.md)                                       | enforce valid template root                                                                  |          |
-| [vue/valid-v-bind](./valid-v-bind.md)                                                     | enforce valid `v-bind` directives                                                            |          |
-| [vue/valid-v-cloak](./valid-v-cloak.md)                                                   | enforce valid `v-cloak` directives                                                           |          |
-| [vue/valid-v-else-if](./valid-v-else-if.md)                                               | enforce valid `v-else-if` directives                                                         |          |
-| [vue/valid-v-else](./valid-v-else.md)                                                     | enforce valid `v-else` directives                                                            |          |
-| [vue/valid-v-for](./valid-v-for.md)                                                       | enforce valid `v-for` directives                                                             |          |
-| [vue/valid-v-html](./valid-v-html.md)                                                     | enforce valid `v-html` directives                                                            |          |
-| [vue/valid-v-if](./valid-v-if.md)                                                         | enforce valid `v-if` directives                                                              |          |
-| [vue/valid-v-is](./valid-v-is.md)                                                         | enforce valid `v-is` directives                                                              |          |
-| [vue/valid-v-model](./valid-v-model.md)                                                   | enforce valid `v-model` directives                                                           |          |
-| [vue/valid-v-on](./valid-v-on.md)                                                         | enforce valid `v-on` directives                                                              |          |
-| [vue/valid-v-once](./valid-v-once.md)                                                     | enforce valid `v-once` directives                                                            |          |
-| [vue/valid-v-pre](./valid-v-pre.md)                                                       | enforce valid `v-pre` directives                                                             |          |
-| [vue/valid-v-show](./valid-v-show.md)                                                     | enforce valid `v-show` directives                                                            |          |
-| [vue/valid-v-slot](./valid-v-slot.md)                                                     | enforce valid `v-slot` directives                                                            |          |
-| [vue/valid-v-text](./valid-v-text.md)                                                     | enforce valid `v-text` directives                                                            |          |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
+| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow props default function `this` access |  |
+| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
+| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
+| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  |
+| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
+| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
+| [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 | :wrench: |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
+| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  |
+| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
+| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  |
+| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  |
+| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  |
+| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  |
 
 ## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
 
@@ -112,31 +113,31 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                                                         | Description                                                                         |          |
-| :---------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | :------- |
-| [vue/attribute-hyphenation](./attribute-hyphenation.md)                                         | enforce attribute naming style on custom components in template                     | :wrench: |
-| [vue/component-definition-name-casing](./component-definition-name-casing.md)                   | enforce specific casing for component definition name                               | :wrench: |
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)                           | require or disallow a line break before tag's closing brackets                      | :wrench: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md)                           | require or disallow a space before tag's closing brackets                           | :wrench: |
-| [vue/html-end-tags](./html-end-tags.md)                                                         | enforce end tag style                                                               | :wrench: |
-| [vue/html-indent](./html-indent.md)                                                             | enforce consistent indentation in `<template>`                                      | :wrench: |
-| [vue/html-quotes](./html-quotes.md)                                                             | enforce quotes style of HTML attributes                                             | :wrench: |
-| [vue/html-self-closing](./html-self-closing.md)                                                 | enforce self-closing style                                                          | :wrench: |
-| [vue/max-attributes-per-line](./max-attributes-per-line.md)                                     | enforce the maximum number of attributes per line                                   | :wrench: |
-| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md)       | require a line break before and after the contents of a multiline element           | :wrench: |
-| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md)                       | enforce unified spacing in mustache interpolations                                  | :wrench: |
-| [vue/no-multi-spaces](./no-multi-spaces.md)                                                     | disallow multiple spaces                                                            | :wrench: |
-| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute                                     | :wrench: |
-| [vue/no-template-shadow](./no-template-shadow.md)                                               | disallow variable declarations from shadowing variables declared in the outer scope |          |
-| [vue/one-component-per-file](./one-component-per-file.md)                                       | enforce that each component should be in its own file                               |          |
-| [vue/prop-name-casing](./prop-name-casing.md)                                                   | enforce specific casing for the Prop name in Vue components                         |          |
-| [vue/require-default-prop](./require-default-prop.md)                                           | require default value for props                                                     |          |
-| [vue/require-explicit-emits](./require-explicit-emits.md)                                       | require `emits` option with name triggered by `$emit()`                             |          |
-| [vue/require-prop-types](./require-prop-types.md)                                               | require type definitions in props                                                   |          |
-| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md)     | require a line break before and after the contents of a singleline element          | :wrench: |
-| [vue/v-bind-style](./v-bind-style.md)                                                           | enforce `v-bind` directive style                                                    | :wrench: |
-| [vue/v-on-style](./v-on-style.md)                                                               | enforce `v-on` directive style                                                      | :wrench: |
-| [vue/v-slot-style](./v-slot-style.md)                                                           | enforce `v-slot` directive style                                                    | :wrench: |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  |
+| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
+| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` |  |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
 
 ## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
 
@@ -148,15 +149,15 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                 | Description                                         |          |
-| :------------------------------------------------------ | :-------------------------------------------------- | :------- |
-| [vue/attributes-order](./attributes-order.md)           | enforce order of attributes                         | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md)   | enforce order of component top-level elements       |          |
-| [vue/no-lone-template](./no-lone-template.md)           | disallow unnecessary `<template>`                   |          |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |          |
-| [vue/no-v-html](./no-v-html.md)                         | disallow use of v-html to prevent XSS attack        |          |
-| [vue/order-in-components](./order-in-components.md)     | enforce order of properties in components           | :wrench: |
-| [vue/this-in-template](./this-in-template.md)           | disallow usage of `this` in template                |          |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements |  |
+| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
+| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
 
 ## Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
@@ -168,50 +169,50 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                                                   | Description                                                                  |          |
-| :---------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :------- |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md)                       | disallow using arrow functions to define watcher                             |          |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md)               | disallow asynchronous actions in computed properties                         |          |
-| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md)                 | disallow custom modifiers on v-model used on the component                   |          |
-| [vue/no-dupe-keys](./no-dupe-keys.md)                                                     | disallow duplication of field names                                          |          |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md)                                           | disallow duplicate conditions in `v-if` / `v-else-if` chains                 |          |
-| [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: |
-| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties                                 |          |
-| [vue/no-template-key](./no-template-key.md)                                               | disallow `key` attribute on `<template>`                                     |          |
-| [vue/no-textarea-mustache](./no-textarea-mustache.md)                                     | disallow mustaches in `<textarea>`                                           |          |
-| [vue/no-unused-components](./no-unused-components.md)                                     | disallow registering components that are not used inside templates           |          |
-| [vue/no-unused-vars](./no-unused-vars.md)                                                 | disallow unused variable definitions of v-for directives or scope attributes |          |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md)                                 | disallow use v-if on the same element as v-for                               |          |
-| [vue/no-v-for-template-key](./no-v-for-template-key.md)                                   | disallow `key` attribute on `<template v-for>`                               |          |
-| [vue/no-v-model-argument](./no-v-model-argument.md)                                       | disallow adding an argument to `v-model` used in custom component            |          |
-| [vue/require-component-is](./require-component-is.md)                                     | require `v-bind:is` of `<component>` elements                                |          |
-| [vue/require-prop-type-constructor](./require-prop-type-constructor.md)                   | require prop type to be a constructor                                        | :wrench: |
-| [vue/require-render-return](./require-render-return.md)                                   | enforce render function to always return value                               |          |
-| [vue/require-v-for-key](./require-v-for-key.md)                                           | require `v-bind:key` with `v-for` directives                                 |          |
-| [vue/require-valid-default-prop](./require-valid-default-prop.md)                         | enforce props default values to be valid                                     |          |
-| [vue/return-in-computed-property](./return-in-computed-property.md)                       | enforce that a return statement is present in computed property              |          |
-| [vue/use-v-on-exact](./use-v-on-exact.md)                                                 | enforce usage of `exact` modifier on `v-on`                                  |          |
-| [vue/valid-template-root](./valid-template-root.md)                                       | enforce valid template root                                                  |          |
-| [vue/valid-v-bind-sync](./valid-v-bind-sync.md)                                           | enforce valid `.sync` modifier on `v-bind` directives                        |          |
-| [vue/valid-v-bind](./valid-v-bind.md)                                                     | enforce valid `v-bind` directives                                            |          |
-| [vue/valid-v-cloak](./valid-v-cloak.md)                                                   | enforce valid `v-cloak` directives                                           |          |
-| [vue/valid-v-else-if](./valid-v-else-if.md)                                               | enforce valid `v-else-if` directives                                         |          |
-| [vue/valid-v-else](./valid-v-else.md)                                                     | enforce valid `v-else` directives                                            |          |
-| [vue/valid-v-for](./valid-v-for.md)                                                       | enforce valid `v-for` directives                                             |          |
-| [vue/valid-v-html](./valid-v-html.md)                                                     | enforce valid `v-html` directives                                            |          |
-| [vue/valid-v-if](./valid-v-if.md)                                                         | enforce valid `v-if` directives                                              |          |
-| [vue/valid-v-model](./valid-v-model.md)                                                   | enforce valid `v-model` directives                                           |          |
-| [vue/valid-v-on](./valid-v-on.md)                                                         | enforce valid `v-on` directives                                              |          |
-| [vue/valid-v-once](./valid-v-once.md)                                                     | enforce valid `v-once` directives                                            |          |
-| [vue/valid-v-pre](./valid-v-pre.md)                                                       | enforce valid `v-pre` directives                                             |          |
-| [vue/valid-v-show](./valid-v-show.md)                                                     | enforce valid `v-show` directives                                            |          |
-| [vue/valid-v-slot](./valid-v-slot.md)                                                     | enforce valid `v-slot` directives                                            |          |
-| [vue/valid-v-text](./valid-v-text.md)                                                     | enforce valid `v-text` directives                                            |          |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
+| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
+| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
+| [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: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
+| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  |
+| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
+| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  |
 
 ## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
@@ -223,30 +224,30 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                                                         | Description                                                                         |          |
-| :---------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | :------- |
-| [vue/attribute-hyphenation](./attribute-hyphenation.md)                                         | enforce attribute naming style on custom components in template                     | :wrench: |
-| [vue/component-definition-name-casing](./component-definition-name-casing.md)                   | enforce specific casing for component definition name                               | :wrench: |
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)                           | require or disallow a line break before tag's closing brackets                      | :wrench: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md)                           | require or disallow a space before tag's closing brackets                           | :wrench: |
-| [vue/html-end-tags](./html-end-tags.md)                                                         | enforce end tag style                                                               | :wrench: |
-| [vue/html-indent](./html-indent.md)                                                             | enforce consistent indentation in `<template>`                                      | :wrench: |
-| [vue/html-quotes](./html-quotes.md)                                                             | enforce quotes style of HTML attributes                                             | :wrench: |
-| [vue/html-self-closing](./html-self-closing.md)                                                 | enforce self-closing style                                                          | :wrench: |
-| [vue/max-attributes-per-line](./max-attributes-per-line.md)                                     | enforce the maximum number of attributes per line                                   | :wrench: |
-| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md)       | require a line break before and after the contents of a multiline element           | :wrench: |
-| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md)                       | enforce unified spacing in mustache interpolations                                  | :wrench: |
-| [vue/no-multi-spaces](./no-multi-spaces.md)                                                     | disallow multiple spaces                                                            | :wrench: |
-| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute                                     | :wrench: |
-| [vue/no-template-shadow](./no-template-shadow.md)                                               | disallow variable declarations from shadowing variables declared in the outer scope |          |
-| [vue/one-component-per-file](./one-component-per-file.md)                                       | enforce that each component should be in its own file                               |          |
-| [vue/prop-name-casing](./prop-name-casing.md)                                                   | enforce specific casing for the Prop name in Vue components                         |          |
-| [vue/require-default-prop](./require-default-prop.md)                                           | require default value for props                                                     |          |
-| [vue/require-prop-types](./require-prop-types.md)                                               | require type definitions in props                                                   |          |
-| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md)     | require a line break before and after the contents of a singleline element          | :wrench: |
-| [vue/v-bind-style](./v-bind-style.md)                                                           | enforce `v-bind` directive style                                                    | :wrench: |
-| [vue/v-on-style](./v-on-style.md)                                                               | enforce `v-on` directive style                                                      | :wrench: |
-| [vue/v-slot-style](./v-slot-style.md)                                                           | enforce `v-slot` directive style                                                    | :wrench: |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  |
+| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
 
 ## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
@@ -258,15 +259,15 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 ```
 
-| Rule ID                                                 | Description                                         |          |
-| :------------------------------------------------------ | :-------------------------------------------------- | :------- |
-| [vue/attributes-order](./attributes-order.md)           | enforce order of attributes                         | :wrench: |
-| [vue/component-tags-order](./component-tags-order.md)   | enforce order of component top-level elements       |          |
-| [vue/no-lone-template](./no-lone-template.md)           | disallow unnecessary `<template>`                   |          |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |          |
-| [vue/no-v-html](./no-v-html.md)                         | disallow use of v-html to prevent XSS attack        |          |
-| [vue/order-in-components](./order-in-components.md)     | enforce order of properties in components           | :wrench: |
-| [vue/this-in-template](./this-in-template.md)           | disallow usage of `this` in template                |          |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements |  |
+| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
+| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
 
 ## Uncategorized
 
@@ -283,98 +284,98 @@ For example:
 }
 ```
 
-| Rule ID                                                                               | Description                                                                             |          |
-| :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------- | :------- |
-| [vue/block-tag-newline](./block-tag-newline.md)                                       | enforce line breaks after opening and before closing block-level tags                   | :wrench: |
-| [vue/component-name-in-template-casing](./component-name-in-template-casing.md)       | enforce specific casing for the component naming style in template                      | :wrench: |
-| [vue/custom-event-name-casing](./custom-event-name-casing.md)                         | enforce specific casing for custom event name                                           |          |
-| [vue/html-button-has-type](./html-button-has-type.md)                                 | disallow usage of button without an explicit type attribute                             |          |
-| [vue/html-comment-content-newline](./html-comment-content-newline.md)                 | enforce unified line brake in HTML comments                                             | :wrench: |
-| [vue/html-comment-content-spacing](./html-comment-content-spacing.md)                 | enforce unified spacing in HTML comments                                                | :wrench: |
-| [vue/html-comment-indent](./html-comment-indent.md)                                   | enforce consistent indentation in HTML comments                                         | :wrench: |
-| [vue/match-component-file-name](./match-component-file-name.md)                       | require component name property to match its file name                                  |          |
-| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components                       | :wrench: |
-| [vue/next-tick-style](./next-tick-style.md)                                           | enforce Promise or callback style in `nextTick`                                         | :wrench: |
-| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md)                   | disallow the use of bare strings in `<template>`                                        |          |
-| [vue/no-boolean-default](./no-boolean-default.md)                                     | disallow boolean defaults                                                               | :wrench: |
-| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md)               | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`                |          |
-| [vue/no-empty-component-block](./no-empty-component-block.md)                         | disallow the `<template>` `<script>` `<style>` block to be empty                        |          |
-| [vue/no-invalid-model-keys](./no-invalid-model-keys.md)                               | require valid keys in model option                                                      |          |
-| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md)                 | disallow to pass multiple objects into array to class                                   |          |
-| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md)     | disallow a potential typo in your component property                                    |          |
-| [vue/no-reserved-component-names](./no-reserved-component-names.md)                   | disallow the use of reserved names in component definitions                             |          |
-| [vue/no-restricted-block](./no-restricted-block.md)                                   | disallow specific block                                                                 |          |
-| [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md)             | disallow asynchronously called restricted methods                                       |          |
-| [vue/no-restricted-component-options](./no-restricted-component-options.md)           | disallow specific component option                                                      |          |
-| [vue/no-restricted-custom-event](./no-restricted-custom-event.md)                     | disallow specific custom event                                                          |          |
-| [vue/no-restricted-props](./no-restricted-props.md)                                   | disallow specific props                                                                 |          |
-| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md)             | disallow specific attribute                                                             |          |
-| [vue/no-restricted-v-bind](./no-restricted-v-bind.md)                                 | disallow specific argument in `v-bind`                                                  |          |
-| [vue/no-static-inline-styles](./no-static-inline-styles.md)                           | disallow static inline `style` attributes                                               |          |
-| [vue/no-template-target-blank](./no-template-target-blank.md)                         | disallow target="\_blank" attribute without rel="noopener noreferrer"                   |          |
-| [vue/no-unregistered-components](./no-unregistered-components.md)                     | disallow using components that are not registered inside templates                      |          |
-| [vue/no-unsupported-features](./no-unsupported-features.md)                           | disallow unsupported Vue.js syntax on the specified version                             | :wrench: |
-| [vue/no-unused-properties](./no-unused-properties.md)                                 | disallow unused properties                                                              |          |
-| [vue/no-unused-refs](./no-unused-refs.md)                                             | disallow unused refs                                                                    |          |
-| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method                                              |          |
-| [vue/no-useless-mustaches](./no-useless-mustaches.md)                                 | disallow unnecessary mustache interpolations                                            | :wrench: |
-| [vue/no-useless-v-bind](./no-useless-v-bind.md)                                       | disallow unnecessary `v-bind` directives                                                | :wrench: |
-| [vue/padding-line-between-blocks](./padding-line-between-blocks.md)                   | require or disallow padding lines between blocks                                        | :wrench: |
-| [vue/require-direct-export](./require-direct-export.md)                               | require the component to be directly exported                                           |          |
-| [vue/require-name-property](./require-name-property.md)                               | require a name property in Vue components                                               |          |
-| [vue/script-indent](./script-indent.md)                                               | enforce consistent indentation in `<script>`                                            | :wrench: |
-| [vue/sort-keys](./sort-keys.md)                                                       | enforce sort-keys in a manner that is compatible with order-in-components               |          |
-| [vue/static-class-names-order](./static-class-names-order.md)                         | enforce static class names order                                                        | :wrench: |
-| [vue/v-for-delimiter-style](./v-for-delimiter-style.md)                               | enforce `v-for` directive's delimiter style                                             | :wrench: |
-| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)                             | enforce v-on event naming style on custom components in template                        | :wrench: |
-| [vue/v-on-function-call](./v-on-function-call.md)                                     | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: |
-| [vue/valid-next-tick](./valid-next-tick.md)                                           | enforce valid `nextTick` function calls                                                 | :wrench: |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
+| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
+| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  |
+| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |
+| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
+| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
+| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
+| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
+| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
+| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
+| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
+| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
+| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
+| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
+| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
+| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
+| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
+| [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  |
+| [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  |
+| [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  |
+| [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event |  |
+| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props |  |
+| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  |
+| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  |
+| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
+| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
+| [vue/no-unregistered-components](./no-unregistered-components.md) | disallow using components that are not registered inside templates |  |
+| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
+| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  |
+| [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  |
+| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  |
+| [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
+| [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: |
+| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
+| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  |
+| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  |
+| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
+| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  |
+| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: |
+| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: |
+| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: |
+| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: |
+| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench: |
 
 ### Extension Rules
 
 The following rules extend the rules provided by ESLint itself and apply them to the expressions in the `<template>`.
 
-| Rule ID                                                     | Description                                                                              |          |
-| :---------------------------------------------------------- | :--------------------------------------------------------------------------------------- | :------- |
-| [vue/array-bracket-newline](./array-bracket-newline.md)     | enforce linebreaks after opening and before closing array brackets                       | :wrench: |
-| [vue/array-bracket-spacing](./array-bracket-spacing.md)     | enforce consistent spacing inside array brackets                                         | :wrench: |
-| [vue/arrow-spacing](./arrow-spacing.md)                     | enforce consistent spacing before and after the arrow in arrow functions                 | :wrench: |
-| [vue/block-spacing](./block-spacing.md)                     | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
-| [vue/brace-style](./brace-style.md)                         | enforce consistent brace style for blocks                                                | :wrench: |
-| [vue/camelcase](./camelcase.md)                             | enforce camelcase naming convention                                                      |          |
-| [vue/comma-dangle](./comma-dangle.md)                       | require or disallow trailing commas                                                      | :wrench: |
-| [vue/comma-spacing](./comma-spacing.md)                     | enforce consistent spacing before and after commas                                       | :wrench: |
-| [vue/comma-style](./comma-style.md)                         | enforce consistent comma style                                                           | :wrench: |
-| [vue/dot-location](./dot-location.md)                       | enforce consistent newlines before and after dots                                        | :wrench: |
-| [vue/dot-notation](./dot-notation.md)                       | enforce dot notation whenever possible                                                   | :wrench: |
-| [vue/eqeqeq](./eqeqeq.md)                                   | require the use of `===` and `!==`                                                       | :wrench: |
-| [vue/func-call-spacing](./func-call-spacing.md)             | require or disallow spacing between function identifiers and their invocations           | :wrench: |
-| [vue/key-spacing](./key-spacing.md)                         | enforce consistent spacing between keys and values in object literal properties          | :wrench: |
-| [vue/keyword-spacing](./keyword-spacing.md)                 | enforce consistent spacing before and after keywords                                     | :wrench: |
-| [vue/max-len](./max-len.md)                                 | enforce a maximum line length                                                            |          |
-| [vue/no-constant-condition](./no-constant-condition.md)     | disallow constant expressions in conditions                                              |          |
-| [vue/no-empty-pattern](./no-empty-pattern.md)               | disallow empty destructuring patterns                                                    |          |
-| [vue/no-extra-parens](./no-extra-parens.md)                 | disallow unnecessary parentheses                                                         | :wrench: |
-| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace                                                            |          |
-| [vue/no-restricted-syntax](./no-restricted-syntax.md)       | disallow specified syntax                                                                |          |
-| [vue/no-sparse-arrays](./no-sparse-arrays.md)               | disallow sparse arrays                                                                   |          |
-| [vue/no-useless-concat](./no-useless-concat.md)             | disallow unnecessary concatenation of literals or template literals                      |          |
-| [vue/object-curly-newline](./object-curly-newline.md)       | enforce consistent line breaks after opening and before closing braces                   | :wrench: |
-| [vue/object-curly-spacing](./object-curly-spacing.md)       | enforce consistent spacing inside braces                                                 | :wrench: |
-| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines                                      | :wrench: |
-| [vue/operator-linebreak](./operator-linebreak.md)           | enforce consistent linebreak style for operators                                         | :wrench: |
-| [vue/prefer-template](./prefer-template.md)                 | require template literals instead of string concatenation                                | :wrench: |
-| [vue/space-in-parens](./space-in-parens.md)                 | enforce consistent spacing inside parentheses                                            | :wrench: |
-| [vue/space-infix-ops](./space-infix-ops.md)                 | require spacing around infix operators                                                   | :wrench: |
-| [vue/space-unary-ops](./space-unary-ops.md)                 | enforce consistent spacing before or after unary operators                               | :wrench: |
-| [vue/template-curly-spacing](./template-curly-spacing.md)   | require or disallow spacing around embedded expressions of template strings              | :wrench: |
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets | :wrench: |
+| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets | :wrench: |
+| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions | :wrench: |
+| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block | :wrench: |
+| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
+| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention |  |
+| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
+| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas | :wrench: |
+| [vue/comma-style](./comma-style.md) | enforce consistent comma style | :wrench: |
+| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
+| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible | :wrench: |
+| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
+| [vue/func-call-spacing](./func-call-spacing.md) | require or disallow spacing between function identifiers and their invocations | :wrench: |
+| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
+| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
+| [vue/max-len](./max-len.md) | enforce a maximum line length |  |
+| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions |  |
+| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
+| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses | :wrench: |
+| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace |  |
+| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax |  |
+| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays |  |
+| [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals |  |
+| [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks inside braces | :wrench: |
+| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
+| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines | :wrench: |
+| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators | :wrench: |
+| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation | :wrench: |
+| [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses | :wrench: |
+| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators | :wrench: |
+| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators | :wrench: |
+| [vue/template-curly-spacing](./template-curly-spacing.md) | require or disallow spacing around embedded expressions of template strings | :wrench: |
 
 ## Deprecated
 
 - :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
 - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
 
-| Rule ID                                                     | Replaced by                                                                   |
-| :---------------------------------------------------------- | :---------------------------------------------------------------------------- |
-| [vue/name-property-casing](./name-property-casing.md)       | [vue/component-definition-name-casing](./component-definition-name-casing.md) |
-| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md)                     |
+| Rule ID | Replaced by |
+|:--------|:------------|
+| [vue/name-property-casing](./name-property-casing.md) | [vue/component-definition-name-casing](./component-definition-name-casing.md) |
+| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) |
diff --git a/docs/rules/no-use-computed-property-like-method.md b/docs/rules/no-use-computed-property-like-method.md
index 224e6cf80..d776cd7eb 100644
--- a/docs/rules/no-use-computed-property-like-method.md
+++ b/docs/rules/no-use-computed-property-like-method.md
@@ -4,11 +4,12 @@ sidebarDepth: 0
 title: vue/no-use-computed-property-like-method
 description: disallow use computed property like method
 ---
-
 # vue/no-use-computed-property-like-method
 
 > disallow use computed property like method
 
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+
 ## :book: Rule Details
 
 This rule disallows to use computed property like method.
diff --git a/docs/rules/object-curly-newline.md b/docs/rules/object-curly-newline.md
index 52e3d6ae4..cc4831c12 100644
--- a/docs/rules/object-curly-newline.md
+++ b/docs/rules/object-curly-newline.md
@@ -2,12 +2,12 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/object-curly-newline
-description: enforce consistent line breaks after opening and before closing braces
+description: enforce consistent line breaks inside braces
 since: v7.0.0
 ---
 # vue/object-curly-newline
 
-> enforce consistent line breaks after opening and before closing braces
+> enforce consistent line breaks inside braces
 
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 

From b06421b1ba134edab580e0379ebf036521a7a7de Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Mon, 3 May 2021 00:06:11 +0900
Subject: [PATCH 27/35] refactor improve selector

---
 lib/rules/no-use-computed-property-like-method.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index a85a55193..d3ca5dc2a 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -225,9 +225,7 @@ module.exports = {
       },
 
       /** @param {ThisExpression} node */
-      'ThisExpression[parent.type="MemberExpression"][parent.parent.type="CallExpression"]'(
-        node
-      ) {
+      'CallExpression > MemberExpression > ThisExpression'(node) {
         if (node.parent.type !== 'MemberExpression') return
         if (node.parent.property.type !== 'Identifier') return
 

From 7459eeaf282115553992b69c9e170c095d7455be Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Mon, 3 May 2021 00:28:29 +0900
Subject: [PATCH 28/35] feat: addPropertyMap

---
 .../no-use-computed-property-like-method.js   | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index d3ca5dc2a..09084c2d2 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -168,6 +168,22 @@ const getValueType = ({ property, propertyMap }) => {
   }
 }
 
+/**
+ * @param {Set<string>} groups
+ * @param {ObjectExpression} vueNodeMap
+ * @param {PropertyMap} propertyMap
+ */
+const addPropertyMap = (groups, vueNodeMap, propertyMap) => {
+  const properties = utils.iterateProperties(vueNodeMap, groups)
+  for (const property of properties) {
+    propertyMap[property.name] = {
+      ...propertyMap[property.name],
+      ...property,
+      valueType: getValueType({ property, propertyMap })
+    }
+  }
+}
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -208,24 +224,10 @@ module.exports = {
         }
       },
 
-      /**
-       * Re-check propertyMap's valueType.
-       * Because there is a possibility that propertyMap's member reference other propertyMap's member.
-       */
-      'MemberExpression[object.type="ThisExpression"]'(node) {
-        const properties = utils.iterateProperties(vueNodeMap, groups)
-
-        for (const property of properties) {
-          propertyMap[property.name] = {
-            ...propertyMap[property.name],
-            ...property,
-            valueType: getValueType({ property, propertyMap })
-          }
-        }
-      },
-
       /** @param {ThisExpression} node */
       'CallExpression > MemberExpression > ThisExpression'(node) {
+        addPropertyMap(groups, vueNodeMap, propertyMap)
+
         if (node.parent.type !== 'MemberExpression') return
         if (node.parent.property.type !== 'Identifier') return
 

From d885a3633a4eb6f56dbe8d3262ac66b0fe6967cf Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Mon, 3 May 2021 22:08:06 +0900
Subject: [PATCH 29/35] refactor: use findProperty

---
 .../no-use-computed-property-like-method.js   | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 09084c2d2..f27c4605e 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -44,21 +44,10 @@ const getComponentPropsType = (property) => {
    * Check object props `props: { objectProps: {...} }`
    */
   if (property.property.value.type === 'ObjectExpression') {
-    const propsIncludeTypeProperty = property.property.value.properties.find(
-      (property) =>
-        property.type === 'Property' &&
-        property.key.type === 'Identifier' &&
-        property.key.name === 'type' &&
-        property.value.type === 'Identifier'
-    )
-
-    if (propsIncludeTypeProperty === undefined) return null
-
-    if (
-      propsIncludeTypeProperty.type === 'Property' &&
-      propsIncludeTypeProperty.value.type === 'Identifier'
-    )
-      return propsIncludeTypeProperty.value.name
+    const typeProperty = utils.findProperty(property.property.value, 'type')
+    if (typeProperty == null) return null
+
+    if (typeProperty.value.type === 'Identifier') return typeProperty.value.name
   }
   return null
 }

From ccbee980b79793c4125c6fa1bde5fa98dccabe7f Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Tue, 4 May 2021 00:30:50 +0900
Subject: [PATCH 30/35] refactor: add comment

---
 lib/rules/no-use-computed-property-like-method.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index f27c4605e..bf7483d28 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -14,7 +14,7 @@ const utils = require('../utils')
  * @typedef {import('../utils').ComponentPropertyData} ComponentPropertyData
  * @typedef {import('../utils').ComponentObjectPropertyData} ComponentObjectPropertyData
  *
- * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string } }}} PropertyMap
+ * @typedef {{[key: string]: ComponentPropertyData & { valueType: { type: string | null } }}} PropertyMap
  */
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -22,6 +22,7 @@ const utils = require('../utils')
 
 /**
  * Get type of props item.
+ * Can't consider array props like: props: {propsA: [String, Number, Function]}
  * @param {ComponentObjectPropertyData} property
  * @return {string | null}
  *

From c2bc020dfa4dc870775f0d5a67fe0055004e3665 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Tue, 4 May 2021 00:37:59 +0900
Subject: [PATCH 31/35] feat: cover ThisExpression

---
 lib/rules/no-use-computed-property-like-method.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index bf7483d28..c20f7e211 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -103,6 +103,7 @@ const getValueType = ({ property, propertyMap }) => {
         ) {
           if (
             returnStatement.argument.type === 'MemberExpression' &&
+            returnStatement.argument.object.type === 'ThisExpression' &&
             returnStatement.argument.property.type === 'Identifier'
           )
             return {
@@ -114,6 +115,7 @@ const getValueType = ({ property, propertyMap }) => {
           if (
             returnStatement.argument.type === 'CallExpression' &&
             returnStatement.argument.callee.type === 'MemberExpression' &&
+            returnStatement.argument.callee.object.type === 'ThisExpression' &&
             returnStatement.argument.callee.property.type === 'Identifier'
           )
             return {

From 3b77c4e3efc0dc07d773989d932a9231baf4f253 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 17 Jul 2021 12:50:53 +0900
Subject: [PATCH 32/35] feat: support return statement return nothing

---
 .../no-use-computed-property-like-method.js   |  6 +++++
 .../no-use-computed-property-like-method.js   | 22 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index c20f7e211..42eeb21ae 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -92,9 +92,15 @@ const getValueType = ({ property, propertyMap }) => {
         const returnStatement = blockStatement.body.find(
           (b) => b.type === 'ReturnStatement'
         )
+
         if (!returnStatement || returnStatement.type !== 'ReturnStatement')
           return
 
+        if (returnStatement.argument === null)
+          return {
+            type: 'ReturnStatementHasNotArgument'
+          }
+
         if (
           property.groupName === 'computed' &&
           propertyMap &&
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index f0d54e9a2..c75ce603b 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -662,6 +662,28 @@ tester.run('no-use-computed-property-like-method', rule, {
       errors: [
         'Use this.computedReturnObject instead of this.computedReturnObject().'
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          computed: {
+            computedReturnNothing() {
+              return
+            },
+          },
+          methods: {
+            fn() {
+              this.computedReturnNothing()
+            }
+          }
+        }
+      </script>
+      `,
+      errors: [
+        'Use this.computedReturnNothing instead of this.computedReturnNothing().'
+      ]
     }
   ]
 })

From ce93fa61ea03746bd724def323417d3e56c493c8 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 17 Jul 2021 13:15:00 +0900
Subject: [PATCH 33/35] fix: support undefined of propertyMap[thisMember]

---
 lib/rules/no-use-computed-property-like-method.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index 42eeb21ae..bec7c32a7 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -63,7 +63,7 @@ const getPrototypeType = (obj) =>
 /**
  * Get return type of property.
  * @param {{ property: ComponentPropertyData, propertyMap?: PropertyMap }} args
- * @returns {{type: string | null}}
+ * @returns {{type: string | null | 'ReturnStatementHasNotArgument'}}
  */
 const getValueType = ({ property, propertyMap }) => {
   if (property.type === 'array') {
@@ -94,7 +94,9 @@ const getValueType = ({ property, propertyMap }) => {
         )
 
         if (!returnStatement || returnStatement.type !== 'ReturnStatement')
-          return
+          return {
+            type: null
+          }
 
         if (returnStatement.argument === null)
           return {
@@ -231,7 +233,12 @@ module.exports = {
 
         const thisMember = node.parent.property.name
 
-        if (!propertyMap[thisMember].valueType.type) return
+        if (
+          !propertyMap[thisMember] ||
+          !propertyMap[thisMember].valueType ||
+          !propertyMap[thisMember].valueType.type
+        )
+          return
 
         if (
           propertyMap[thisMember].groupName === 'computed' &&

From 60e7c48bb9e59dcf70c61d8f6d9f18139787d266 Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 17 Jul 2021 13:34:50 +0900
Subject: [PATCH 34/35] style: run lint

---
 lib/rules/no-use-computed-property-like-method.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/lib/rules/no-use-computed-property-like-method.js b/lib/rules/no-use-computed-property-like-method.js
index bec7c32a7..5b0371b8f 100644
--- a/lib/rules/no-use-computed-property-like-method.js
+++ b/lib/rules/no-use-computed-property-like-method.js
@@ -115,9 +115,8 @@ const getValueType = ({ property, propertyMap }) => {
             returnStatement.argument.property.type === 'Identifier'
           )
             return {
-              type:
-                propertyMap[returnStatement.argument.property.name].valueType
-                  .type
+              type: propertyMap[returnStatement.argument.property.name]
+                .valueType.type
             }
 
           if (
@@ -127,9 +126,8 @@ const getValueType = ({ property, propertyMap }) => {
             returnStatement.argument.callee.property.type === 'Identifier'
           )
             return {
-              type:
-                propertyMap[returnStatement.argument.callee.property.name]
-                  .valueType.type
+              type: propertyMap[returnStatement.argument.callee.property.name]
+                .valueType.type
             }
         }
 
@@ -190,8 +188,7 @@ module.exports = {
     docs: {
       description: 'disallow use computed property like method',
       categories: undefined,
-      url:
-        'https://eslint.vuejs.org/rules/no-use-computed-property-like-method.html'
+      url: 'https://eslint.vuejs.org/rules/no-use-computed-property-like-method.html'
     },
     fixable: null,
     schema: [],

From 7cb18fefa658a95006b7357dd96da0aeaf74814f Mon Sep 17 00:00:00 2001
From: tyankatsu <frips.ryilsufupe+dev@gmail.com>
Date: Sat, 17 Jul 2021 20:34:04 +0900
Subject: [PATCH 35/35] test: add test case

---
 .../rules/no-use-computed-property-like-method.js  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
index c75ce603b..b6e5e6958 100644
--- a/tests/lib/rules/no-use-computed-property-like-method.js
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -404,6 +404,20 @@ tester.run('no-use-computed-property-like-method', rule, {
         }
       </script>
       `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script>
+        export default {
+          methods: {
+            fn() {
+              this.foo()
+            }
+          }
+        }
+      </script>
+      `
     }
   ],
   invalid: [