fix: fix modifier parsing for dynamic argument with deep path (#9585)

fix #9577

Author: shasharoman

src/compiler/parser/index.js

@@ -33,7 +33,7 @@ const dynamicArgRE = /^\[.*\]$/
 const argRE = /:(.*)$/
 export const bindRE = /^:|^\.|^v-bind:/
 const propBindRE = /^\./
-const modifierRE = /\.[^.]+/g
+const modifierRE = /\.[^.\]]+(?=[^\]]*$)/g
 
 const slotRE = /^v-slot(:|$)|^#/
 

test/unit/features/options/directives.spec.js

@@ -287,4 +287,82 @@ describe('Options directives', () => {
     }).$mount()
     vm.key = 'bar'
   })
+
+  it('deep object like `deep.a` as dynamic arguments', done => {
+    const vm = new Vue({
+      template: `<div v-my:[deep.a]="1"/>`,
+      data: {
+        deep: {
+          a: 'foo'
+        }
+      },
+      directives: {
+        my: {
+          bind(el, binding) {
+            expect(binding.arg).toBe('foo')
+          },
+          update(el, binding) {
+            expect(binding.arg).toBe('bar')
+            expect(binding.oldArg).toBe('foo')
+            done()
+          }
+        }
+      }
+    }).$mount()
+    vm.deep.a = 'bar'
+  })
+
+  it('deep object like `deep.a.b` as dynamic arguments', done => {
+    const vm = new Vue({
+      template: `<div v-my:[deep.a.b]="1"/>`,
+      data: {
+        deep: {
+          a: {
+            b: 'foo'
+          }
+        }
+      },
+      directives: {
+        my: {
+          bind(el, binding) {
+            expect(binding.arg).toBe('foo')
+          },
+          update(el, binding) {
+            expect(binding.arg).toBe('bar')
+            expect(binding.oldArg).toBe('foo')
+            done()
+          }
+        }
+      }
+    }).$mount()
+    vm.deep.a.b = 'bar'
+  })
+
+  it('deep object as dynamic arguments with modifiers', done => {
+    const vm = new Vue({
+      template: `<div v-my:[deep.a.b].x.y="1"/>`,
+      data: {
+        deep: {
+          a: {
+            b: 'foo'
+          }
+        }
+      },
+      directives: {
+        my: {
+          bind(el, binding) {
+            expect(binding.arg).toBe('foo')
+            expect(binding.modifiers.x).toBe(true)
+            expect(binding.modifiers.y).toBe(true)
+          },
+          update(el, binding) {
+            expect(binding.arg).toBe('bar')
+            expect(binding.oldArg).toBe('foo')
+            done()
+          }
+        }
+      }
+    }).$mount()
+    vm.deep.a.b = 'bar'
+  })
 })