diff --git a/extensions/vscode/syntaxes/vue.tmLanguage.json b/extensions/vscode/syntaxes/vue.tmLanguage.json
index c7ed60e3e2..71109bc144 100644
--- a/extensions/vscode/syntaxes/vue.tmLanguage.json
+++ b/extensions/vscode/syntaxes/vue.tmLanguage.json
@@ -985,37 +985,42 @@
 			]
 		},
 		"vue-directives-original": {
-			"begin": "(?:\\b(v-)|([:\\.])|(@)|(#))(\\[?)([\\w\\-]*)(\\]?)(?:\\.([\\w\\-]*))*",
+			"begin": "(?:(?:(v-[\\w-]+)(:)?)|([:\\.])|(@)|(#))(?:(?:(\\[)([^\\]]*)(\\]))|([\\w-]+))?",
 			"beginCaptures": {
 				"1": {
 					"name": "entity.other.attribute-name.html.vue"
 				},
 				"2": {
-					"name": "punctuation.attribute-shorthand.bind.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"3": {
-					"name": "punctuation.attribute-shorthand.event.html.vue"
+					"name": "punctuation.attribute-shorthand.bind.html.vue"
 				},
 				"4": {
-					"name": "punctuation.attribute-shorthand.slot.html.vue"
+					"name": "punctuation.attribute-shorthand.event.html.vue"
 				},
 				"5": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "punctuation.attribute-shorthand.slot.html.vue"
 				},
 				"6": {
-					"name": "entity.other.attribute-name.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"7": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "source.ts.embedded.html.vue",
+					"patterns": [
+						{
+							"include": "source.ts#expression"
+						}
+					]
 				},
 				"8": {
-					"name": "entity.other.attribute-name.html.vue"
+					"name": "punctuation.separator.key-value.html.vue"
 				},
 				"9": {
-					"name": "punctuation.separator.key-value.html.vue"
+					"name": "entity.other.attribute-name.html.vue"
 				}
 			},
-			"end": "(?=\\s*+[^=\\s])",
+			"end": "(?=\\s*[^=\\s])",
 			"endCaptures": {
 				"1": {
 					"name": "punctuation.definition.string.end.html.vue"
@@ -1023,6 +1028,15 @@
 			},
 			"name": "meta.attribute.directive.vue",
 			"patterns": [
+			  {
+					"match": "(\\.)([\\w-]*)",
+					"1": {
+						"name": "punctuation.separator.key-value.html.vue"
+					},
+					"2": {
+						"name": "entity.other.attribute-name.html.vue"
+					}
+				},
 				{
 					"include": "#vue-directives-expression"
 				}
diff --git a/test-workspace/language-service/syntax/directives.vue b/test-workspace/language-service/syntax/directives.vue
index d6408879e1..d749c51998 100644
--- a/test-workspace/language-service/syntax/directives.vue
+++ b/test-workspace/language-service/syntax/directives.vue
@@ -16,6 +16,14 @@
 	<div :foo="':foo=123'"></div>
 	<div :foo="[{ bar: []}]"></div>
 	<div .prop="[1, 2]"></div>
+	<div v-a:[({a:1}).a]="1"></div>
+	<div v-a:[c]></div>
+	<div v-a:[({a:1}).a].d="[1, 2]"></div>
+	<div @[({a:1}).a].d="[1, 2]" v-d:[2]="3"></div>
+	<div :[1]="value"></div>
+	<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
+	<div :xlink:special.d="3"></div>
+	<div v-a.c.d="3"></div>
 </template>
 
 <template lang="pug">