fix this-in-template to avoid making invalid syntax in autofix

Author: mysticatea

lib/rules/this-in-template.js

@@ -84,6 +84,11 @@ module.exports = {
       }
       : {
         'VExpressionContainer' (node) {
+          if (node.parent.type === 'VDirectiveKey') {
+            // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
+            // For example, In `:[this.prop]` case, `:[this` is an argument and `prop]` is a modifier.
+            return
+          }
           if (node.references) {
             for (const reference of node.references) {
               if (!scope.nodes.some(el => el.name === reference.id.name)) {

tests/lib/rules/this-in-template.js

@@ -106,6 +106,12 @@ function createValidTests (prefix, options) {
         </div>
       </template><!-- ${comment} -->`,
       options
+    },
+
+    // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
+    {
+      code: `<template><div v-on:[x]="1"></div></template><!-- ${comment} -->`,
+      options
     }
   ]
 }
@@ -153,6 +159,13 @@ function createInvalidTests (prefix, options, message, type) {
       errors: [{ message, type }],
       options
     }
+
+    // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
+    // {
+    //   code: `<template><div v-on:[${prefix}name]="1"></div></template><!-- ${comment} -->`,
+    //   errors: [{ message, type }],
+    //   options
+    // }
   ].concat(options[0] === 'always'
     ? []
     : [