diff --git a/.python-version b/.python-version
new file mode 100644
index 0000000..98fccd6
--- /dev/null
+++ b/.python-version
@@ -0,0 +1 @@
+3.8
\ No newline at end of file
diff --git a/Vue Component.sublime-syntax b/Vue Component.sublime-syntax
index 4ee8e79..abd5245 100644
--- a/Vue Component.sublime-syntax	
+++ b/Vue Component.sublime-syntax	
@@ -1,9 +1,11 @@
 %YAML 1.2
 ---
-extends: Packages/HTML/HTML.sublime-syntax
 name: Vue Component
-version: 2
 scope: text.html.vue
+version: 2
+
+extends: Packages/HTML/HTML.sublime-syntax
+
 file_extensions:
   - vue
 
@@ -50,82 +52,172 @@ variables:
     )
 
 contexts:
-  main:
-    - meta_prepend: true
-    - include: template-tag
-    - include: mustache-expression
 
-  mustache-expression:
-    - match: (?={{)
-      set:
-        - meta_scope: meta.template.vue
-        - match: '{{'
-          scope: punctuation.definition.template.begin.html
-          embed: scope:source.js
-          embed_scope: source.js.embedded.vue
-          escape: '}}'
-          escape_captures:
-            0: meta.template.vue punctuation.definition.template.end.html
-        - match: ''
-          pop: true
+###[ HTML TAGS ]##############################################################
 
-  tag-attributes:
+  prototype:
     - meta_prepend: true
-    - include: vue-directive
+    - include: mustache-templates
 
-  template-tag:
-    - match: (<)((?i:template)){{tag_name_break}}
+  tag-html:
+    - meta_prepend: true
+    - include: script-tag
+    - include: style-tag
+    - include: template-tag
+
+###[ SCRIPT TAG ]#############################################################
+
+  script-tag:
+    # for compatibility with ST builds before 4114
+    - match: (<)((?i:script)){{tag_name_break}}
       captures:
-        0: meta.tag.template.begin.html
         1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.template.html
-      push: template-mustache
+        2: entity.name.tag.script.html
+      push: script-javascript
+    - match: (</)((?i:script){{tag_name_break}})
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.script.html
+      push: script-close-tag-content
 
-  vue-directive:
-    - match: (?=v-)
-      push:
-        - vue-directive-assignment
-        - tag-generic-attribute-name
-    - match: (?::|@)
-      scope: punctuation.definition.attribute.html
-      push:
-        - vue-directive-assignment
-        - tag-generic-attribute-name
+  script-close-tag-content:
+    - meta_scope: meta.tag.script.end.html
+    - include: tag-end
 
-  vue-directive-assignment:
-    - match: '='
-      scope: punctuation.separator.key-value.html
-      set: vue-directive-value
-    - include: else-pop
+  script-common:
+    - meta_prepend: true
+    - include: script-lang-attribute
 
-  vue-directive-value:
-    - match: '"'
-      scope: meta.string.html string.quoted.double.html punctuation.definition.string.begin.html
-      embed: scope:source.js
-      pop: true
-      embed_scope: meta.string.html source.js.embedded.vue
-      escape: '"'
-      escape_captures:
-        0: meta.string.html string.quoted.double.html punctuation.definition.string.end.html
-    - match: "'"
-      scope: meta.string.html string.quoted.single.html punctuation.definition.string.begin.html
+  script-javascript:
+    # for compatibility with ST builds before 4114
+    - meta_scope: meta.tag.script.begin.html
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      set: script-javascript-content
+    - include: script-common
+
+  script-javascript-content:
+    # for compatibility with ST builds before 4114
+    - meta_include_prototype: false
+    - match: '{{script_content_begin}}'
+      captures:
+        1: comment.block.html punctuation.definition.comment.begin.html
+      pop: 1  # make sure to match only once
       embed: scope:source.js
-      pop: true
-      embed_scope: meta.string.html source.js.embedded.vue
-      escape: "'"
+      embed_scope: source.js.embedded.html
+      escape: '{{script_content_end}}'
       escape_captures:
-        0: meta.string.html string.quoted.single.html punctuation.definition.string.end.html
-    - include: else-pop
+        1: source.js.embedded.html
+        2: comment.block.html punctuation.definition.comment.end.html
+        3: source.js.embedded.html
+        4: comment.block.html punctuation.definition.comment.end.html
+
+  script-lang-attribute:
+    - match: (?i:lang){{attribute_name_break}}
+      scope: meta.attribute-with-value.html entity.other.attribute-name.html
+      set: script-lang-attribute-assignment
+
+  script-lang-attribute-assignment:
+    - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.html
+    - match: =
+      scope: punctuation.separator.key-value.html
+      set: script-lang-attribute-value
+    - match: (?=\S)
+      set: script-javascript
+
+  script-lang-attribute-value:
+    - meta_include_prototype: false
+    - meta_scope: meta.tag.script.begin.html meta.attribute-with-value.html
+    - include: script-lang-decider
 
-  style-close-tag:
+  script-lang-decider:
+    - match: (?i)(?=coffee{{unquoted_attribute_break}}|\'coffee\'|"coffee")
+      set:
+        -   - meta_scope: meta.tag.script.begin.html
+            - match: '>'
+              scope: punctuation.definition.tag.end.html
+              set:
+                - match: '{{script_content_begin}}'
+                  embed_scope: source.coffee.embedded.html
+                  escape_captures:
+                    1: source.coffee.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.coffee.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.coffee
+                  escape: '{{script_content_end}}'
+            - include: script-common
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+    - match: (?i)(?=livescript{{unquoted_attribute_break}}|\'livescript\'|"livescript")
+      set:
+        -   - meta_scope: meta.tag.script.begin.html
+            - match: '>'
+              scope: punctuation.definition.tag.end.html
+              set:
+                - match: '{{script_content_begin}}'
+                  embed_scope: source.livescript.embedded.html
+                  escape_captures:
+                    1: source.livescript.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.livescript.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.livescript
+                  escape: '{{script_content_end}}'
+            - include: script-common
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+    - match: (?i)(?=ts{{unquoted_attribute_break}}|\'ts\'|"ts")
+      set:
+        -   - meta_scope: meta.tag.script.begin.html
+            - match: '>'
+              scope: punctuation.definition.tag.end.html
+              set:
+                - match: '{{script_content_begin}}'
+                  embed_scope: source.ts.embedded.html
+                  escape_captures:
+                    1: source.ts.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.ts.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.ts
+                  escape: '{{script_content_end}}'
+            - include: script-common
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+    - match: (?=\S)
+      set:
+        - script-javascript
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+
+###[ STYLE TAG ]##############################################################
+
+  style-tag:
     # for compatibility with ST builds before 4114
+    - match: (<)((?i:style)){{tag_name_break}}
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.style.html
+      push: style-css
     - match: (</)((?i:style){{tag_name_break}})
       captures:
         1: punctuation.definition.tag.begin.html
         2: entity.name.tag.style.html
-      set:
-        - meta_scope: meta.tag.style.end.html
-        - include: tag-end
+      push: style-close-tag-content
+
+  style-close-tag-content:
+    - meta_scope: meta.tag.style.end.html
+    - include: tag-end
 
   style-common:
     - meta_prepend: true
@@ -134,12 +226,10 @@ contexts:
   style-css:
     # for compatibility with ST builds before 4114
     - meta_scope: meta.tag.style.begin.html
-    - include: style-common
     - match: '>'
       scope: punctuation.definition.tag.end.html
-      set:
-        - style-close-tag
-        - style-css-content
+      set: style-css-content
+    - include: style-common
 
   style-css-content:
     # for compatibility with ST builds before 4114
@@ -179,133 +269,127 @@ contexts:
     - match: (?i)(?=sass{{unquoted_attribute_break}}|\'sass\'|"sass")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.sass.embedded.html
-                      escape_captures:
-                        1: source.sass.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.sass.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.sass
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.sass.embedded.html
+                  escape_captures:
+                    1: source.sass.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.sass.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.sass
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=scss{{unquoted_attribute_break}}|\'scss\'|"scss")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.scss.embedded.html
-                      escape_captures:
-                        1: source.scss.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.scss.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.scss
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.scss.embedded.html
+                  escape_captures:
+                    1: source.scss.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.scss.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.scss
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=stylus{{unquoted_attribute_break}}|\'stylus\'|"stylus")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.stylus.embedded.html
-                      escape_captures:
-                        1: source.stylus.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.stylus.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.stylus
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.stylus.embedded.html
+                  escape_captures:
+                    1: source.stylus.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.stylus.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.stylus
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=postcss\?parser=sugarss{{unquoted_attribute_break}}|\'postcss\?parser=sugarss\'|"postcss\?parser=sugarss")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.sss.embedded.html
-                      escape_captures:
-                        1: source.sss.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.sss.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.sss
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.sss.embedded.html
+                  escape_captures:
+                    1: source.sss.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.sss.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.sss
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=postcss{{unquoted_attribute_break}}|\'postcss\'|"postcss")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.postcss.embedded.html
-                      escape_captures:
-                        1: source.postcss.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.postcss.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.postcss
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.postcss.embedded.html
+                  escape_captures:
+                    1: source.postcss.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.postcss.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.postcss
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=less{{unquoted_attribute_break}}|\'less\'|"less")
       set:
         -   - meta_scope: meta.tag.style.begin.html
-            - include: style-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: style-close-tag
-                -   - embed_scope: source.less.embedded.html
-                      escape_captures:
-                        1: source.less.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.less.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{style_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.less
-                      escape: '{{style_content_end}}'
+                - match: '{{style_content_begin}}'
+                  embed_scope: source.less.embedded.html
+                  escape_captures:
+                    1: source.less.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.less.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.less
+                  escape: '{{style_content_end}}'
+            - include: style-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?=\S)
@@ -314,162 +398,34 @@ contexts:
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
 
-  script-close-tag:
-    # for compatibility with ST builds before 4114
-    - match: (</)((?i:script){{tag_name_break}})
+###[ TEMPLATE TAG ]###########################################################
+
+  template-tag:
+    - match: (<)((?i:template)){{tag_name_break}}
       captures:
         1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.script.html
-      set:
-        - meta_scope: meta.tag.script.end.html
-        - include: tag-end
-
-  script-common:
-    - meta_prepend: true
-    - include: script-lang-attribute
-
-  script-javascript:
-    # for compatibility with ST builds before 4114
-    - meta_scope: meta.tag.script.begin.html
-    - include: script-common
-    - match: '>'
-      scope: punctuation.definition.tag.end.html
-      set:
-        - script-close-tag
-        - script-javascript-content
-
-  script-javascript-content:
-    # for compatibility with ST builds before 4114
-    - meta_include_prototype: false
-    - match: '{{script_content_begin}}'
+        2: entity.name.tag.template.html
+      push: template-mustache
+    - match: (</)((?i:template))
       captures:
-        1: comment.block.html punctuation.definition.comment.begin.html
-      pop: 1  # make sure to match only once
-      embed: scope:source.js
-      embed_scope: source.js.embedded.html
-      escape: '{{script_content_end}}'
-      escape_captures:
-        1: source.js.embedded.html
-        2: comment.block.html punctuation.definition.comment.end.html
-        3: source.js.embedded.html
-        4: comment.block.html punctuation.definition.comment.end.html
-
-  script-lang-attribute:
-    - match: (?i:lang){{attribute_name_break}}
-      scope: meta.attribute-with-value.html entity.other.attribute-name.html
-      set: script-lang-attribute-assignment
-
-  script-lang-attribute-assignment:
-    - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.html
-    - match: =
-      scope: punctuation.separator.key-value.html
-      set: script-lang-attribute-value
-    - match: (?=\S)
-      set: script-javascript
-
-  script-lang-attribute-value:
-    - meta_include_prototype: false
-    - meta_scope: meta.tag.script.begin.html meta.attribute-with-value.html
-    - include: script-lang-decider
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.template.html
+        3: punctuation.definition.tag.end.html
+      push: template-tag-content
 
-  script-lang-decider:
-    - match: (?i)(?=coffee{{unquoted_attribute_break}}|\'coffee\'|"coffee")
-      set:
-        -   - meta_scope: meta.tag.script.begin.html
-            - include: script-common
-            - match: '>'
-              scope: punctuation.definition.tag.end.html
-              set:
-                -   - include: script-close-tag
-                -   - embed_scope: source.coffee.embedded.html
-                      escape_captures:
-                        1: source.coffee.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.coffee.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{script_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.coffee
-                      escape: '{{script_content_end}}'
-        - tag-generic-attribute-meta
-        - tag-generic-attribute-value
-    - match: (?i)(?=livescript{{unquoted_attribute_break}}|\'livescript\'|"livescript")
-      set:
-        -   - meta_scope: meta.tag.script.begin.html
-            - include: script-common
-            - match: '>'
-              scope: punctuation.definition.tag.end.html
-              set:
-                -   - include: script-close-tag
-                -   - embed_scope: source.livescript.embedded.html
-                      escape_captures:
-                        1: source.livescript.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.livescript.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{script_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.livescript
-                      escape: '{{script_content_end}}'
-        - tag-generic-attribute-meta
-        - tag-generic-attribute-value
-    - match: (?i)(?=ts{{unquoted_attribute_break}}|\'ts\'|"ts")
-      set:
-        -   - meta_scope: meta.tag.script.begin.html
-            - include: script-common
-            - match: '>'
-              scope: punctuation.definition.tag.end.html
-              set:
-                -   - include: script-close-tag
-                -   - embed_scope: source.ts.embedded.html
-                      escape_captures:
-                        1: source.ts.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: source.ts.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{script_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:source.ts
-                      escape: '{{script_content_end}}'
-        - tag-generic-attribute-meta
-        - tag-generic-attribute-value
-    - match: (?=\S)
-      set:
-        - script-javascript
-        - tag-generic-attribute-meta
-        - tag-generic-attribute-value
+  template-tag-content:
+    - meta_scope: meta.tag.template.end.html
+    - include: tag-end
 
   template-common:
     - include: template-lang-attribute
     - include: tag-attributes
-    - match: />
-      scope: punctuation.definition.tag.end.html
-      pop: true
-
-  template-close-tag:
-    - match: (</)((?i:template))(>)
-      scope: meta.tag.template.end.html
-      captures:
-        1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.template.html
-        3: punctuation.definition.tag.end.html
-      pop: true
+    - include: tag-end-self-closing
 
   template-mustache:
-    - meta_content_scope: meta.tag.template.begin.html
+    - meta_scope: meta.tag.template.begin.html
+    - include: tag-end
     - include: template-common
-    - match: '>'
-      scope: punctuation.definition.tag.end.html
-      set:
-        - include: template-close-tag
-        - match: ''
-          push: main
 
   template-lang-attribute:
     - match: (?i:lang){{attribute_name_break}}
@@ -493,67 +449,64 @@ contexts:
     - match: (?i)(?=jade{{unquoted_attribute_break}}|\'jade\'|"jade")
       set:
         -   - meta_scope: meta.tag.template.begin.html
-            - include: template-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: template-close-tag
-                -   - embed_scope: text.jade.embedded.html
-                      escape_captures:
-                        1: text.jade.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: text.jade.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{template_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:text.jade
-                      escape: '{{template_content_end}}'
+                - match: '{{template_content_begin}}'
+                  embed_scope: text.jade.embedded.html
+                  escape_captures:
+                    1: text.jade.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: text.jade.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:text.jade
+                  escape: '{{template_content_end}}'
+            - include: template-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=pug{{unquoted_attribute_break}}|\'pug\'|"pug")
       set:
         -   - meta_scope: meta.tag.template.begin.html
-            - include: template-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: template-close-tag
-                -   - embed_scope: text.pug.embedded.html
-                      escape_captures:
-                        1: text.pug.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: text.pug.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{template_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:text.pug
-                      escape: '{{template_content_end}}'
+                - match: '{{template_content_begin}}'
+                  embed_scope: text.pug.embedded.html
+                  escape_captures:
+                    1: text.pug.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: text.pug.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:text.pug
+                  escape: '{{template_content_end}}'
+            - include: template-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?i)(?=slm{{unquoted_attribute_break}}|\'slm\'|"slm")
       set:
         -   - meta_scope: meta.tag.template.begin.html
-            - include: template-common
             - match: '>'
               scope: punctuation.definition.tag.end.html
               set:
-                -   - include: template-close-tag
-                -   - embed_scope: text.slm.embedded.html
-                      escape_captures:
-                        1: text.slm.embedded.html
-                        2: comment.block.html punctuation.definition.comment.end.html
-                        3: text.slm.embedded.html
-                        4: comment.block.html punctuation.definition.comment.end.html
-                      match: '{{template_content_begin}}'
-                      captures:
-                        1: comment.block.html punctuation.definition.comment.begin.html
-                      pop: 1
-                      embed: scope:text.slm
-                      escape: '{{template_content_end}}'
+                - match: '{{template_content_begin}}'
+                  embed_scope: text.slm.embedded.html
+                  escape_captures:
+                    1: text.slm.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: text.slm.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:text.slm
+                  escape: '{{template_content_end}}'
+            - include: template-common
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
     - match: (?=\S)
@@ -561,3 +514,119 @@ contexts:
         - template-mustache
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
+
+###[ TAG ATTRIBUTES ]#########################################################
+
+  tag-attributes:
+    - meta_prepend: true
+    - include: vue-directive
+
+  tag-class-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-generic-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-href-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-id-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-attribute-value-content:
+    - meta_prepend: true
+    - include: mustache-interpolations
+
+  strings-common-content:
+    - meta_prepend: true
+    - include: mustache-interpolations
+
+###[ MUSTAGE TEMPLATES ]######################################################
+
+  mustache-interpolations:
+    - match: (?={{)
+      push: mustache-interpolation-content
+
+  mustache-interpolation-content:
+    - clear_scopes: 1
+    - include: mustache-templates
+    - include: immediately-pop
+
+  mustache-templates:
+    - match: '{{'
+      scope: meta.interpolation.vue punctuation.definition.interpolation.begin.html
+      embed: scope:source.js
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: '}}'
+      escape_captures:
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.html
+
+###[ VUE DIRECTIVES ]#########################################################
+
+  vue-directive:
+    - match: (?=v-)
+      push:
+        - vue-directive-meta
+        - vue-directive-assignment
+        - tag-generic-attribute-name
+    - match: (?::|@|#)
+      scope: punctuation.definition.attribute.html
+      push:
+        - vue-directive-meta
+        - vue-directive-assignment
+        - tag-generic-attribute-name
+
+  vue-directive-meta:
+    - meta_include_prototype: false
+    - meta_scope: meta.attribute-with-value.directive.html
+    - include: immediately-pop
+
+  vue-directive-assignment:
+    - match: =
+      scope: punctuation.separator.key-value.html
+      set: vue-directive-value
+    - include: else-pop
+
+  vue-directive-value:
+    - match: \"
+      scope: meta.string.html string.quoted.double.html punctuation.definition.string.begin.html
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.string.html meta.interpolation.vue source.js.embedded.vue
+      escape: \"
+      escape_captures:
+        0: meta.attribute-with-value.directive.html meta.string.html string.quoted.double.html
+          punctuation.definition.string.end.html
+    - match: \'
+      scope: meta.string.html string.quoted.single.html punctuation.definition.string.begin.html
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.string.html meta.interpolation.vue source.js.embedded.vue
+      escape: \'
+      escape_captures:
+        0: meta.attribute-with-value.directive.html meta.string.html string.quoted.single.html
+          punctuation.definition.string.end.html
+    - include: else-pop
+
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    # https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments
+    - match: (?=\[)
+      push: vue-dynamic-attribute-name
+
+  vue-dynamic-attribute-name:
+    - clear_scopes: 1  # clear `entity.other.attribute-name`
+    - match: \[
+      scope: meta.interpolation.vue punctuation.section.interpolation.begin.vue
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: \]
+      escape_captures:
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.vue
+    - include: immediately-pop
diff --git a/Vue Component.sublime-syntax.yaml-macros b/Vue Component.sublime-syntax.yaml-macros
index 1f56464..6daadfb 100644
--- a/Vue Component.sublime-syntax.yaml-macros	
+++ b/Vue Component.sublime-syntax.yaml-macros	
@@ -1,10 +1,12 @@
 %YAML 1.2
 %TAG ! tag:yaml-macros:src.macros:
 ---
-extends: Packages/HTML/HTML.sublime-syntax
 name: Vue Component
-version: 2
 scope: text.html.vue
+version: 2
+
+extends: Packages/HTML/HTML.sublime-syntax
+
 file_extensions:
   - vue
 
@@ -51,90 +53,112 @@ variables:
     )
 
 contexts:
-  main:
-    - meta_prepend: true
-    - include: template-tag
-    - include: mustache-expression
 
-  mustache-expression:
-    - match: '(?={{)'
-      set:
-        - meta_scope: meta.template.vue
-        - match: '{{'
-          scope: punctuation.definition.template.begin.html
-          embed: scope:source.js
-          embed_scope: source.js.embedded.vue
-          escape: '}}'
-          escape_captures:
-            0: meta.template.vue punctuation.definition.template.end.html
-        - match: ''
-          pop: true
+###[ HTML TAGS ]##############################################################
 
-  tag-attributes:
+  prototype:
     - meta_prepend: true
-    - include: vue-directive
+    - include: mustache-templates
 
-  template-tag:
-    - match: (<)((?i:template)){{tag_name_break}}
+  tag-html:
+    - meta_prepend: true
+    - include: script-tag
+    - include: style-tag
+    - include: template-tag
+
+###[ SCRIPT TAG ]#############################################################
+
+  script-tag:
+    # for compatibility with ST builds before 4114
+    - match: (<)((?i:script)){{tag_name_break}}
       captures:
-        0: meta.tag.template.begin.html
         1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.template.html
-      push: template-mustache
+        2: entity.name.tag.script.html
+      push: script-javascript
+    - match: (</)((?i:script){{tag_name_break}})
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.script.html
+      push: script-close-tag-content
 
-  vue-directive:
-    - match: (?=v-)
-      push:
-        - vue-directive-assignment
-        - tag-generic-attribute-name
-    - match: (?::|@)
-      scope: punctuation.definition.attribute.html
-      push:
-        - vue-directive-assignment
-        - tag-generic-attribute-name
+  script-close-tag-content:
+    - meta_scope: meta.tag.script.end.html
+    - include: tag-end
 
-  vue-directive-assignment:
-    - match: '='
-      scope: punctuation.separator.key-value.html
-      set: vue-directive-value
-    - include: else-pop
+  script-common:
+    - meta_prepend: true
+    - include: script-lang-attribute
 
-  vue-directive-value:
-    - match: '"'
-      scope:
-        meta.string.html string.quoted.double.html
-        punctuation.definition.string.begin.html
-      embed: scope:source.js
-      pop: true
-      embed_scope: meta.string.html source.js.embedded.vue
-      escape: '"'
-      escape_captures:
-        0:
-          meta.string.html string.quoted.double.html
-          punctuation.definition.string.end.html
-    - match: "'"
-      scope:
-        meta.string.html string.quoted.single.html
-        punctuation.definition.string.begin.html
+  script-javascript:
+    # for compatibility with ST builds before 4114
+    - meta_scope: meta.tag.script.begin.html
+    - match: '>'
+      scope: punctuation.definition.tag.end.html
+      set: script-javascript-content
+    - include: script-common
+
+  script-javascript-content:
+    # for compatibility with ST builds before 4114
+    - meta_include_prototype: false
+    - match: '{{script_content_begin}}'
+      captures:
+        1: comment.block.html punctuation.definition.comment.begin.html
+      pop: 1  # make sure to match only once
       embed: scope:source.js
-      pop: true
-      embed_scope: meta.string.html source.js.embedded.vue
-      escape: "'"
+      embed_scope: source.js.embedded.html
+      escape: '{{script_content_end}}'
       escape_captures:
-        0:
-          meta.string.html string.quoted.single.html
-          punctuation.definition.string.end.html
-    - include: else-pop
+        1: source.js.embedded.html
+        2: comment.block.html punctuation.definition.comment.end.html
+        3: source.js.embedded.html
+        4: comment.block.html punctuation.definition.comment.end.html
+
+  script-lang-attribute:
+    - match: (?i:lang){{attribute_name_break}}
+      scope: meta.attribute-with-value.html entity.other.attribute-name.html
+      set: script-lang-attribute-assignment
 
-  style-close-tag:
+  script-lang-attribute-assignment:
+    - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.html
+    - match: =
+      scope: punctuation.separator.key-value.html
+      set: script-lang-attribute-value
+    - match: (?=\S)
+      set: script-javascript
+
+  script-lang-attribute-value:
+    - meta_include_prototype: false
+    - meta_scope: meta.tag.script.begin.html meta.attribute-with-value.html
+    - include: script-lang-decider
+
+  script-lang-decider:
+    - !script_language [ coffee, source.coffee ]
+    - !script_language [ livescript, source.livescript ]
+    - !script_language [ ts, source.ts ]
+    - match: (?=\S)
+      set:
+        - script-javascript
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+
+###[ STYLE TAG ]##############################################################
+
+  style-tag:
     # for compatibility with ST builds before 4114
+    - match: (<)((?i:style)){{tag_name_break}}
+      captures:
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.style.html
+      push: style-css
     - match: (</)((?i:style){{tag_name_break}})
       captures:
         1: punctuation.definition.tag.begin.html
         2: entity.name.tag.style.html
-      set:
-        - meta_scope: meta.tag.style.end.html
-        - include: tag-end
+      push: style-close-tag-content
+
+  style-close-tag-content:
+    - meta_scope: meta.tag.style.end.html
+    - include: tag-end
 
   style-common:
     - meta_prepend: true
@@ -143,12 +167,10 @@ contexts:
   style-css:
     # for compatibility with ST builds before 4114
     - meta_scope: meta.tag.style.begin.html
-    - include: style-common
     - match: '>'
       scope: punctuation.definition.tag.end.html
-      set:
-        - style-close-tag
-        - style-css-content
+      set: style-css-content
+    - include: style-common
 
   style-css-content:
     # for compatibility with ST builds before 4114
@@ -197,99 +219,34 @@ contexts:
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
 
-  script-close-tag:
-    # for compatibility with ST builds before 4114
-    - match: (</)((?i:script){{tag_name_break}})
+###[ TEMPLATE TAG ]###########################################################
+
+  template-tag:
+    - match: (<)((?i:template)){{tag_name_break}}
       captures:
         1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.script.html
-      set:
-        - meta_scope: meta.tag.script.end.html
-        - include: tag-end
-
-  script-common:
-    - meta_prepend: true
-    - include: script-lang-attribute
-
-  script-javascript:
-    # for compatibility with ST builds before 4114
-    - meta_scope: meta.tag.script.begin.html
-    - include: script-common
-    - match: '>'
-      scope: punctuation.definition.tag.end.html
-      set:
-        - script-close-tag
-        - script-javascript-content
-
-  script-javascript-content:
-    # for compatibility with ST builds before 4114
-    - meta_include_prototype: false
-    - match: '{{script_content_begin}}'
+        2: entity.name.tag.template.html
+      push: template-mustache
+    - match: (</)((?i:template))
       captures:
-        1: comment.block.html punctuation.definition.comment.begin.html
-      pop: 1  # make sure to match only once
-      embed: scope:source.js
-      embed_scope: source.js.embedded.html
-      escape: '{{script_content_end}}'
-      escape_captures:
-        1: source.js.embedded.html
-        2: comment.block.html punctuation.definition.comment.end.html
-        3: source.js.embedded.html
-        4: comment.block.html punctuation.definition.comment.end.html
-
-  script-lang-attribute:
-    - match: (?i:lang){{attribute_name_break}}
-      scope: meta.attribute-with-value.html entity.other.attribute-name.html
-      set: script-lang-attribute-assignment
-
-  script-lang-attribute-assignment:
-    - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.html
-    - match: =
-      scope: punctuation.separator.key-value.html
-      set: script-lang-attribute-value
-    - match: (?=\S)
-      set: script-javascript
-
-  script-lang-attribute-value:
-    - meta_include_prototype: false
-    - meta_scope: meta.tag.script.begin.html meta.attribute-with-value.html
-    - include: script-lang-decider
+        1: punctuation.definition.tag.begin.html
+        2: entity.name.tag.template.html
+        3: punctuation.definition.tag.end.html
+      push: template-tag-content
 
-  script-lang-decider:
-    - !script_language [ coffee, source.coffee ]
-    - !script_language [ livescript, source.livescript ]
-    - !script_language [ ts, source.ts ]
-    - match: (?=\S)
-      set:
-        - script-javascript
-        - tag-generic-attribute-meta
-        - tag-generic-attribute-value
+  template-tag-content:
+    - meta_scope: meta.tag.template.end.html
+    - include: tag-end
 
   template-common:
     - include: template-lang-attribute
     - include: tag-attributes
-    - match: '/>'
-      scope: punctuation.definition.tag.end.html
-      pop: true
-
-  template-close-tag:
-    - match: (</)((?i:template))(>)
-      scope: meta.tag.template.end.html
-      captures:
-        1: punctuation.definition.tag.begin.html
-        2: entity.name.tag.template.html
-        3: punctuation.definition.tag.end.html
-      pop: true
+    - include: tag-end-self-closing
 
   template-mustache:
-    - meta_content_scope: meta.tag.template.begin.html
+    - meta_scope: meta.tag.template.begin.html
+    - include: tag-end
     - include: template-common
-    - match: '>'
-      scope: punctuation.definition.tag.end.html
-      set:
-        - include: template-close-tag
-        - match: ''
-          push: main
 
   template-lang-attribute:
     - match: (?i:lang){{attribute_name_break}}
@@ -318,3 +275,131 @@ contexts:
         - template-mustache
         - tag-generic-attribute-meta
         - tag-generic-attribute-value
+
+###[ TAG ATTRIBUTES ]#########################################################
+
+  tag-attributes:
+    - meta_prepend: true
+    - include: vue-directive
+
+  tag-class-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-generic-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-href-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-id-attribute-value:
+    # for compatibility with ST builds before 4114
+    - meta_prepend: true
+    - meta_include_prototype: false
+
+  tag-attribute-value-content:
+    - meta_prepend: true
+    - include: mustache-interpolations
+
+  strings-common-content:
+    - meta_prepend: true
+    - include: mustache-interpolations
+
+###[ MUSTAGE TEMPLATES ]######################################################
+
+  mustache-interpolations:
+    - match: (?={{)
+      push: mustache-interpolation-content
+
+  mustache-interpolation-content:
+    - clear_scopes: 1
+    - include: mustache-templates
+    - include: immediately-pop
+
+  mustache-templates:
+    - match: '{{'
+      scope: meta.interpolation.vue punctuation.definition.interpolation.begin.html
+      embed: scope:source.js
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: '}}'
+      escape_captures:
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.html
+
+###[ VUE DIRECTIVES ]#########################################################
+
+  vue-directive:
+    - match: (?=v-)
+      push:
+        - vue-directive-meta
+        - vue-directive-assignment
+        - tag-generic-attribute-name
+    - match: (?::|@|#)
+      scope: punctuation.definition.attribute.html
+      push:
+        - vue-directive-meta
+        - vue-directive-assignment
+        - tag-generic-attribute-name
+
+  vue-directive-meta:
+    - meta_include_prototype: false
+    - meta_scope: meta.attribute-with-value.directive.html
+    - include: immediately-pop
+
+  vue-directive-assignment:
+    - match: =
+      scope: punctuation.separator.key-value.html
+      set: vue-directive-value
+    - include: else-pop
+
+  vue-directive-value:
+    - match: \"
+      scope:
+        meta.string.html string.quoted.double.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.js#expression-statement
+      embed_scope:
+        meta.string.html meta.interpolation.vue
+        source.js.embedded.vue
+      escape: \"
+      escape_captures:
+        0:
+          meta.attribute-with-value.directive.html
+          meta.string.html string.quoted.double.html
+          punctuation.definition.string.end.html
+    - match: \'
+      scope:
+        meta.string.html string.quoted.single.html
+        punctuation.definition.string.begin.html
+      embed: scope:source.js#expression-statement
+      embed_scope:
+        meta.string.html meta.interpolation.vue
+        source.js.embedded.vue
+      escape: \'
+      escape_captures:
+        0:
+          meta.attribute-with-value.directive.html
+          meta.string.html string.quoted.single.html
+          punctuation.definition.string.end.html
+    - include: else-pop
+
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    # https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments
+    - match: (?=\[)
+      push: vue-dynamic-attribute-name
+
+  vue-dynamic-attribute-name:
+    - clear_scopes: 1  # clear `entity.other.attribute-name`
+    - match: \[
+      scope: meta.interpolation.vue punctuation.section.interpolation.begin.vue
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: \]
+      escape_captures:
+        0: meta.interpolation.vue punctuation.definition.interpolation.end.vue
+    - include: immediately-pop
diff --git a/src/macros.py b/src/macros.py
index 3f727a6..9884d5a 100644
--- a/src/macros.py
+++ b/src/macros.py
@@ -15,34 +15,29 @@ def embed_language_in_tag(tag, match, embed):
         set=[
             [
                 _rule(meta_scope='meta.tag.%s.begin.html' % tag),
-                _rule(include='%s-common' % tag),
                 _rule(
                     match='>',
                     scope='punctuation.definition.tag.end.html',
                     set=[
-                        [
-                            _rule(include='%s-close-tag' % tag)
-                        ],
-                        [
-                            _rule(
-                                match=r'{{%s_content_begin}}' % tag,
-                                captures={
-                                    1: 'comment.block.html punctuation.definition.comment.begin.html',
-                                },
-                                pop=1,
-                                embed=('scope:%s' % embed),
-                                embed_scope=('%s.embedded.html' % embed),
-                                escape='{{%s_content_end}}' % tag,
-                                escape_captures={
-                                  1: ('%s.embedded.html' % embed),
-                                  2: 'comment.block.html punctuation.definition.comment.end.html',
-                                  3: ('%s.embedded.html' % embed),
-                                  4: 'comment.block.html punctuation.definition.comment.end.html',
-                                },
-                            )
-                        ]
+                        _rule(
+                            match=r'{{%s_content_begin}}' % tag,
+                            captures={
+                                1: 'comment.block.html punctuation.definition.comment.begin.html',
+                            },
+                            pop=1,
+                            embed=('scope:%s' % embed),
+                            embed_scope=('%s.embedded.html' % embed),
+                            escape='{{%s_content_end}}' % tag,
+                            escape_captures={
+                              1: ('%s.embedded.html' % embed),
+                              2: 'comment.block.html punctuation.definition.comment.end.html',
+                              3: ('%s.embedded.html' % embed),
+                              4: 'comment.block.html punctuation.definition.comment.end.html',
+                            },
+                        )
                     ]
                 ),
+                _rule(include='%s-common' % tag),
             ],
             'tag-generic-attribute-meta',
             'tag-generic-attribute-value',
diff --git a/tests/syntax_test_script.vue b/tests/syntax_test_script.vue
index 05c8ac0..190fc8b 100644
--- a/tests/syntax_test_script.vue
+++ b/tests/syntax_test_script.vue
@@ -1,5 +1,7 @@
 // SYNTAX TEST "Vue Component.sublime-syntax"
 
+    </script>
+//  ^^^^^^^^^ meta.tag.script.end.html
 
     <script> var i = 0; </script>
 //  ^^^^^^^^ meta.tag - source
diff --git a/tests/syntax_test_style.vue b/tests/syntax_test_style.vue
index 8b88d44..55d19c0 100644
--- a/tests/syntax_test_style.vue
+++ b/tests/syntax_test_style.vue
@@ -1,5 +1,7 @@
 // SYNTAX TEST "Vue Component.sublime-syntax"
 
+    </style>
+//  ^^^^^^^^ meta.tag.style.end.html
 
     <style> h1 {} </style>
 //  ^^^^^^^ meta.tag - source
diff --git a/tests/syntax_test_template.vue b/tests/syntax_test_template.vue
new file mode 100644
index 0000000..0035c86
--- /dev/null
+++ b/tests/syntax_test_template.vue
@@ -0,0 +1,112 @@
+// SYNTAX TEST "Vue Component.sublime-syntax"
+
+    <template>
+// <- text.html.vue - text text
+//  ^^^^^^^^^^ meta.tag.template.begin.html
+
+    </template>
+// <- text.html.vue - text text
+//  ^^^^^^^^^^^ meta.tag.template.end.html
+
+    </template><!-- stray template close tag -->
+// <- text.html.vue - text text
+//  ^^^^^^^^^^^ meta.tag.template.end.html
+
+    <template lang="jade"> foo </template>
+//  ^^^^^^^^^^^^^^^^^^^^^^ meta.tag - source
+//                        ^^^^^ text.jade.embedded.html - meta.tag
+//                             ^^^^^^^^^^^ meta.tag - source
+
+    <template lang="jade"> foo --> </template>
+//  ^^^^^^^^^^^^^^^^^^^^^^ meta.tag - source
+//                        ^^^^^ text.jade.embedded.html - meta.tag
+//                             ^^^^ - meta.tag - source
+//                             ^^^ comment.block.html punctuation.definition.comment.end.html
+//                                 ^^^^^^^^^^^ meta.tag - source
+
+    <template lang="jade"> <!-- foo </template>
+//  ^^^^^^^^^^^^^^^^^^^^^^ meta.tag - source
+//                        ^^^^^ - meta.tag - source
+//                         ^^^^ punctuation.definition.comment.begin.html
+//                             ^^^^^ text.jade.embedded.html - meta.tag
+//                                  ^^^^^^^^^^^ meta.tag - source
+
+    <template lang="jade"> <!-- foo --> </template>
+//  ^^^^^^^^^^^^^^^^^^^^^^ meta.tag - source
+//                        ^^^^^ - meta.tag - source
+//                         ^^^^ punctuation.definition.comment.begin.html
+//                             ^^^^^ text.jade.embedded.html - meta.tag
+//                                  ^^^^ - meta.tag - source
+//                                  ^^^ comment.block.html punctuation.definition.comment.end.html
+//                                      ^^^^^^^^^^^ meta.tag - source
+
+
+    <template lang="jade">
+
+// <- text.jade.embedded.html
+
+    </template>
+// <- text.jade.embedded.html
+//^^ text.jade.embedded.html
+//  ^^^^^^^^^^^ meta.tag - meta.tag meta.tag - text.jade
+
+
+    <template lang="jade">
+//  ^^^^^^^^^^ meta.tag - meta.tag meta.tag - meta.attribute-with-value
+//            ^^^^^^^^^^^ meta.tag meta.attribute-with-value.html - meta.tag meta.tag
+//                       ^ meta.tag.template.begin.html - meta.tag meta.tag
+//  ^ punctuation.definition.tag.begin.html
+//   ^^^^^^^^ entity.name.tag.template.html
+//            ^^^^ entity.other.attribute-name.html
+//                ^ punctuation.separator.key-value.html
+//                       ^ punctuation.definition.tag.end.html
+//                        ^ - text.jade
+
+// <- text.jade.embedded.html
+    </template>
+// <- text.jade.embedded.html
+//^^ text.jade.embedded.html
+//  ^^^^^^^^^^^ meta.tag - meta.tag meta.tag - text.jade
+//  ^^ punctuation.definition.tag.begin.html
+//    ^^^^^^^^ entity.name.tag.template.html
+//            ^ punctuation.definition.tag.end.html
+
+    <template lang="pug">
+//  ^^^^^^^^^^ meta.tag - meta.tag meta.tag - meta.attribute-with-value
+//            ^^^^^^^^^^ meta.tag meta.attribute-with-value.html - meta.tag meta.tag
+//                      ^ meta.tag.template.begin.html - meta.tag meta.tag
+//  ^ punctuation.definition.tag.begin.html
+//   ^^^^^^^^ entity.name.tag.template.html
+//            ^^^^ entity.other.attribute-name.html
+//                ^ punctuation.separator.key-value.html
+//                      ^ punctuation.definition.tag.end.html
+//                       ^ - text.pug
+
+// <- text.pug.embedded.html
+    </template>
+// <- text.pug.embedded.html
+//^^ text.pug.embedded.html
+//  ^^^^^^^^^^^ meta.tag - meta.tag meta.tag - text.pug
+//  ^^ punctuation.definition.tag.begin.html
+//    ^^^^^^^^ entity.name.tag.template.html
+//            ^ punctuation.definition.tag.end.html
+
+    <template lang="slm">
+//  ^^^^^^^^^^ meta.tag - meta.tag meta.tag - meta.attribute-with-value
+//            ^^^^^^^^^^ meta.tag meta.attribute-with-value.html - meta.tag meta.tag
+//                      ^ meta.tag.template.begin.html - meta.tag meta.tag
+//  ^ punctuation.definition.tag.begin.html
+//   ^^^^^^^^ entity.name.tag.template.html
+//            ^^^^ entity.other.attribute-name.html
+//                ^ punctuation.separator.key-value.html
+//                      ^ punctuation.definition.tag.end.html
+//                       ^ - text.slm
+
+// <- text.slm.embedded.html
+    </template>
+// <- text.slm.embedded.html
+//^^ text.slm.embedded.html
+//  ^^^^^^^^^^^ meta.tag - meta.tag meta.tag - text.slm
+//  ^^ punctuation.definition.tag.begin.html
+//    ^^^^^^^^ entity.name.tag.template.html
+//            ^ punctuation.definition.tag.end.html
diff --git a/tests/syntax_tests_mustage.vue b/tests/syntax_tests_mustage.vue
new file mode 100644
index 0000000..693ae30
--- /dev/null
+++ b/tests/syntax_tests_mustage.vue
@@ -0,0 +1,147 @@
+// SYNTAX TEST "Vue Component.sublime-syntax"
+
+    <h1> {{ foo.text }} </h1>
+//       ^^^^^^^^^^^^^^ meta.interpolation.vue
+//       ^^ punctuation.definition.interpolation.begin.html
+//         ^^^^^^^^^^ source.js.embedded.vue
+//                   ^^ punctuation.definition.interpolation.end.html
+
+    <p {{foo.attrib}}>
+//     ^^^^^^^^^^^^^^ meta.interpolation.vue
+//     ^^ punctuation.definition.interpolation.begin.html
+//       ^^^^^^^^^^ source.js.embedded.vue
+//                 ^^ punctuation.definition.interpolation.end.html
+
+    <p attrib="{{ foo.value }}" >
+//            ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
+//             ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
+//                            ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
+//            ^ string.quoted.double.html punctuation.definition.string.begin.html
+//             ^^ punctuation.definition.interpolation.begin.html - source.js
+//               ^^^^^^^^^^^ source.js.embedded.vue
+//                          ^^ punctuation.definition.interpolation.end.html - source.js
+//                            ^ string.quoted.double.html punctuation.definition.string.end.html
+
+    <p attrib='{{ foo.value }}' >
+//            ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
+//             ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
+//                            ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
+//            ^ string.quoted.single.html punctuation.definition.string.begin.html
+//             ^^ punctuation.definition.interpolation.begin.html - source.js
+//               ^^^^^^^^^^^ source.js.embedded.vue
+//                          ^^ punctuation.definition.interpolation.end.html - source.js
+//                            ^ string.quoted.single.html punctuation.definition.string.end.html
+
+    <p attrib={{ foo.value }} >
+//            ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
+//            ^^ punctuation.definition.interpolation.begin.html - source.js
+//              ^^^^^^^^^^^ source.js.embedded.vue
+//                         ^^ punctuation.definition.interpolation.end.html - source.js
+
+    <p v-attrib="{'key': 'value'}">
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue meta.mapping
+//                               ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                                ^ meta.tag - meta.attribute-with-value
+//                                 ^ - meta.tag
+
+    <p v-attrib="i = 0">
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                    ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                     ^ meta.tag - meta.attribute-with-value
+//                      ^ - meta.tag
+
+    <p v-attrib='i = 0'>
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                    ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                     ^ meta.tag - meta.attribute-with-value
+//                      ^ - meta.tag
+
+    <p @handler="function_call($event)">
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                                    ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                                     ^ meta.tag - meta.attribute-with-value
+//                                      ^ - meta.tag
+
+    <p @handler='function_call($event)'>
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                                    ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                                     ^ meta.tag - meta.attribute-with-value
+//                                      ^ - meta.tag
+
+    <p #handler="variable">
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                       ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                        ^ meta.tag - meta.attribute-with-value
+//                         ^ - meta.tag
+
+    <p #handler='variable'>
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                       ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                        ^ meta.tag - meta.attribute-with-value
+//                         ^ - meta.tag
+
+    <p :handler="expression">
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                         ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                          ^ meta.tag - meta.attribute-with-value
+//                           ^ - meta.tag
+
+    <p :handler='expression'>
+//  ^^^ meta.tag - meta.attribute-with-value
+//     ^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html - meta.string
+//     ^ punctuation.definition.attribute.html
+//              ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//               ^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html meta.string.html meta.interpolation.vue source.js.embedded.vue
+//                         ^ meta.tag meta.attribute-with-value.directive.html meta.string.html - meta.interpolation
+//                          ^ meta.tag - meta.attribute-with-value
+//                           ^ - meta.tag
+
+    <template #[`content-${variable}`]>
+//            ^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
+//            ^ entity.other.attribute-name.html
+//             ^ meta.interpolation.vue punctuation.section.interpolation.begin.vue - source.js.embedded
+//              ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
+//                                   ^ meta.interpolation.vue punctuation.definition.interpolation.end.vue - source.js.embedded
+//                                    ^ meta.tag - meta.attribute-with-value
+//                                     ^ - meta.tag
+
+    <template v-slot:[`content-${variable}`] >
+//            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
+//            ^^^^^^^ entity.other.attribute-name.html
+//                   ^ meta.interpolation.vue punctuation.section.interpolation.begin.vue - source.js.embedded
+//                    ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
+//                                         ^ meta.interpolation.vue punctuation.definition.interpolation.end.vue - source.js.embedded
+//                                          ^ meta.tag - meta.interpolation
+//                                           ^ meta.tag - meta.attribute-with-value
+//                                            ^ - meta.tag
+
+</html>