How to setup two different apps on a single droplet through two different subdomain?

Hi, im trying to make this work since last 4 days… Can anybody guide me pls.

1. I have domain xxx.com using a nameserver outside digitalocean.

2. Through DNS management i create “A Record” of subdomain1.xxx.com and subdomain2.xxx.com pointing to a droplet public IP. The record i created is as follow

subdomain1.xxx.com     A 14400 dropletipv4
www.subdomain1.xxx.com A 14400 dropletipv4
subdomain2.xxx.com     A 14400 dropletipv4
www.subdomain2.xxx.com A 14400 dropletipv4

3. the first app is a laravel app, which will be access through subdomain1.xxx.com. it runs on LAMP. i can make this things work just fine, when i open subdomain1.xxx.com the browser shows the correct app.

4. the 2nd app is a vue js app, which will be access through subdomain2.xxx.com. i create a nginx server block and using this config to guide the subdomain2.xxx.com to the folder containing the 2nd app. At the path /etc/nginx/sites-available/app2 i have nginx config as follow :

server {
        listen 80;
        listen [::]:80;
        server_name subdomain2.xxx.com www.subdomain2.xxx.com;
        root /var/www/app2;
        
        location / {
                proxy_pass http://localhost:8080;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

The problem is, whenever i open subdomain2.xxx.com the browser keep showing the first app.