Advice on npm

Hello, so I am kinda new to everyhing, couple months. And I just recently accepted job in company. We are using some custom CMS system, where there is Laravel installation, usually 6 or 8, and then there is folder themes and theme (speficically named) inside that folder, which has its own logic - node, composer, routes, whatever.

So what I want to figure out is, I usually have troubles when compiling assets, as there is node_modules in root as well as this theme directory. Right now, I had to update Vue in template from 2.* whatever to vue3 as I am used to composition api and other new stuff. I attach my package.json. There is clearly Vue 3 package inside this theme folder. Well, when I run "npm run dev" for some reason it probably takes some packages from root folder, as I got this error:

[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

so, to fix it, I had to go to root and update Vue also. So what am I doing wrong? Am I able to do something about it? It happens really often. I am working in PHP storm. To Open project, I did not use ROOT directory, but specific theme directory.

package.json after "npm install" in time of mentioned error

{
    "name": "template-stack",
    "version": "4.0.0",
    "description": "",
    "main": "index.html",
    "scripts": {
        "dev": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production",
        "stylelint": "stylelint \"resources/assets/scss/**/*.scss\" \"resources/assets/scss/*.scss\"",
        "stylelint:fix": "stylelint \"resources/assets/scss/**/*.scss\" \"resources/assets/scss/*.scss\" --fix",
        "eslint": "./node_modules/.bin/eslint \"resources/assets/js/**/*.js\" \"resources/assets/js/*.js\"",
        "eslint:fix": "eslint \"resources/assets/js/**/*.js\" \"resources/assets/js/*.js\" --fix"
    },
    "private": true,
    "devDependencies": {
        "@vue/compiler-sfc": "^3.3.4",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "copy-webpack-plugin": "^6.4.1",
        "dotenv": "^10.0.0",
        "eslint": "^7.27.0",
        "eslint-plugin-standard": "^5.0.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-webpack-plugin": "^2.4.2",
        "laravel-mix": "^6.0.0",
        "postcss": "^8.4.24",
        "postcss-html": "^1.5.0",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.64.2",
        "sass-loader": "^8.0.2",
        "stylelint": "^15.8.0",
        "stylelint-config-recommended-scss": "^12.0.0",
        "stylelint-config-sass-guidelines": "^10.0.0",
        "stylelint-config-standard-scss": "^9.0.0",
        "stylelint-order": "^6.0.3",
        "stylelint-scss": "^5.0.1",
        "stylelint-selector-bem-pattern": "^2.1.1",
        "vue-loader": "^16.1.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "bootstrap": "^4.6.0",
        "cross-env": "^7.0.3",
        "vue": "^3.2.36",
        "vue-multiselect": "^3.0.0-beta.2"
    }
}