Fix vue3 keyword syntax for pangloss/vim-javascript

syntax/vue-javascript.vim

@@ -21,12 +21,18 @@ let s:indent = &sw * (1 + s:has_init_indent)
 let s:keywords_regexp = '\v^\s{'.s:indent.'}(async )?<('
       \.join(split(s:vue_keywords, ' '), '|')
       \.')\ze'
-let contains = hlexists('jsAsyncKeyword') 
+
+" Currently support https://github.com/pangloss/vim-javascript
+let s:useJavaScriptPlugin = hlexists('jsAsyncKeyword')
+let s:containedin = s:useJavaScriptPlugin
+      \? 'jsObject,jsFuncBlock,@jsExpression' 
+      \: 'javascriptVueScript' 
+let s:contains = s:useJavaScriptPlugin
       \? 'jsAsyncKeyword' 
       \: 'javaScriptReserved' 
 let s:match_option = 
-      \' containedin=jsObject,javascriptVueScript'
-      \.' contains='.contains
+      \' containedin='.s:containedin
+      \.' contains='.s:contains
       \.' skipwhite skipempty'
 
 execute 'syntax match vueObjectKey /'
@@ -47,20 +53,22 @@ execute 'syntax match vueObjectFuncKey /'
       \.s:match_option
       \.' nextgroup=jsFuncArgs'
 
-let s:vue3_keywords = 'ref reactive toRefs watch computed getCurrentInstance'.
-      \' onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onErrorCaptured onRenderTracked onRenderTriggered'
+let s:vue3_keywords = 'ref reactive toRefs watch computed'.
+      \' onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount'.
+      \' onUnmounted onErrorCaptured onRenderTracked onRenderTriggered'.
+      \' getCurrentInstance'
 let s:vue3_keywords_regexp = '\v<('
       \.join(split(s:vue3_keywords, ' '), '|')
       \.')\ze'
 
-execute 'syntax match vueObjectFuncName /'
+execute 'syntax match vue3Keyword /'
       \.s:vue3_keywords_regexp
       \.'\_s*\(/'
       \.s:match_option
-      \.' nextgroup=jsFuncArgs'
 
 highlight default link vueObjectKey vueObjectKeyword
 highlight default link vueObjectFuncName vueObjectKeyword
+highlight default link vue3Keyword vueObjectKeyword
 highlight default link vueObjectFuncKey vueObjectKeyword
 highlight default link vueObjectKeyword Type
 "}}}

syntax/vue.vim

@@ -77,12 +77,10 @@ endfunction
 " Load main syntax {{{
 "
 """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
-" syntax. It defines group htmlJavaScript and htmlCss.
-call s:LoadSyntax('@HTMLSyntax', 'html')
 
-" Load vue-html syntax
-runtime syntax/vue-html.vim
+" Load syntax/html.vim to syntax group, which loads full JavaScript and CSS
+" syntax. It defines group @html, @htmlJavaScript, and @htmlCss.
+call s:LoadSyntax('@html', 'html')
 
 " Avoid overload
 if !hlexists('cssTagName')
@@ -95,6 +93,9 @@ if !hlexists('javaScriptComment')
   call s:LoadSyntax('@htmlJavaScript', 'javascript')
 endif
 
+" Load vue-html syntax
+runtime syntax/vue-html.vim
+
 " Load vue-javascript syntax
 runtime syntax/vue-javascript.vim
 "}}}
@@ -155,12 +156,12 @@ endif
 syntax region htmlVueTemplate fold
       \ start=+<template[^>]*>+
       \ end=+^</template>+
-      \ keepend contains=@HTMLSyntax
+      \ keepend contains=@html
 " When template code is not well indented
 syntax region htmlVueTemplate fold
       \ start=+<template[^>]*>+
       \ end=+</template>\ze\n\(^$\n\)*<\(script\|style\)+
-      \ keepend contains=@HTMLSyntax
+      \ keepend contains=@html
 
 syntax region javascriptVueScript fold 
       \ start=+<script[^>]*>+
@@ -316,7 +317,7 @@ syntax match javaScriptNumber '\v<-?\d+L?>|0[xX][0-9a-fA-F]+>'
 silent! syntax clear htmlHead
 
 " html5 data-*
-syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@HTMLSyntax
+syntax match htmlArg '\v<data(-[.a-z0-9]+)+>' containedin=@html
 "}}}
 
 """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""