VSCODE - How to configure docker compose problem matcher - vue.js

Question

I've the following workspace configuration
{
"folders": [
{
"path": "."
}
],
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "docker-compose:launch:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"preLaunchTask": "docker:compose:up",
"postDebugTask": "docker:compose:down"
},
],
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "npm:install",
"type": "shell",
"command": "npm install",
"linux": {
"command": "if [ -d ${workspaceFolder}/node_modules ]; then npm install fi"
},
"windows": {
"command": "cmd",
"args": ["/C","if not exist ${workspaceFolder}/node_modules npm install"]
},
"options": {"cwd":"${workspaceFolder}"}
},
{
"type": "docker-compose",
"label": "docker:compose:up",
"dependsOn": ["npm:install"],
"isBackground": true,
"dockerCompose": {
"up": {
"detached": true,
"build": true,
"customOptions": "",
"services": [
"site"
]
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
}
},
{
"type": "docker-compose",
"label": "docker:compose:down",
"dockerCompose": {
"down": {
"removeVolumes":false
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
},
},
]
},
"settings": {
"terminal.integrated.cwd": "${workspaceFolder}"
}
}
The launch("docker-compose:launch:chrome") configuration is not launching the chrome and I think thats happening because it thinks the task is not finished.
As far I know this should be checked using the problemMatcher, for vuejs as an example i can have the following problemMatcher:
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
How can i achive the same results using docker-compose?
I mean, is there a way to only launch chrome browser when the npm run serve command is finished?