How to change default auto selected user snippets behavior in Vs Code

Question

My default code editor is Vscode But recently i am facing some problem while i am trying to use some custom (User) code snippets for Vue js. I wrote some Vuejs custom snippets for my project. While i use some property in Vue instance like el, data, method etc. I saw the curly block area is automatically turn blurry or selected (What it is really called i don't know). While the blurry line remain only Keyboards ESC key can only remove this kind of behavior. It's really annoying. How can i stop this kind of behavior in Vscode while using custom user snippets?

Here is my snippet:

" "Provide the Vue instance an existing DOM element to mount on (Vue.js snippet)": {
    "prefix": "el",
    "body": ["el: $1"],
    "description": "Provide the Vue instance an existing DOM element to mount on (Vue.js snippet)"
},
"The data object for the Vue instance (Vue.js snippet)": {
    "prefix": "data",
    "body": ["data: $1"],
    "description": "The data object for the Vue instance (Vue.js snippet)"
}

Result:

Answer 1

Since you are using the tabstop $1 you can lose the highlighting with the Tab key - Tab moves on to the next tabstop.

But you don't need a tabstop at all from you showed or the last cursor tabstop $0 works. So either

"body": ["data: "],    // or
"body": ["data: $0"],  

or Tab after entering your text.

(which are the same thing here) will not highlight the pasted or typed text that you enter after triggering the snippet.