PhpStorm does not see a Vuex module or its mutations ("cannot resolve")

Greetings! 🪐

Please accept my sincere gratitude for the so ineffably magnificent framework... solution...

I am currently using IDE PhpStore which is purely phenomenal… for PHP (e.g. Laravel)… Vue/Javascript… Bash…

Relatively recently, I stumbled upon a quite interesting case with the IDE and Vuex and am trying figuring out whether it's a wonderful bug with the IDE Vue plugin or it is not a common Vuex approach in general to omit in the future.

---

As an object (seen)

For example, the following works as both an application and IDE sees the module:

// @js/index.js
​
import Vue from 'vue';
import Vuex from 'vuex';
import App from '@js/app';
import Settings from '@js/components/Settings';
import WithdrawalsStore from '@js/store/WithdrawalsStore';
​
Vue.use(Vuex);
​
new App({
    store: new Vuex.Store({
        state: {},
​
        modules: {
            withdrawals: WithdrawalsStore, // Has `namespaced: true`
        }
    )),
​
    components: {
        Settings,
    }
})
  .$mount(App.element);
​
// @js/components/Settings.vue
​
export default {
    name: 'Settings',
​
    methods: {
        ...mapMutations({
          setWithdrawalSystems: 'withdrawals/setSystems', // This is seen by PhpStorm
        })
    }
}

How it does look like when IDE sees the module:

Imported (not seen)

Yet, the following does still work as an application but the IDE does not see the module (imported the same store from a file instead of stating a bare object):

// @js/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import App from '@js/app';
import Settings from '@js/components/Settings';
import DashboardStore from '@js/store/DashboardStore'; // Importing the store

Vue.use(Vuex);

new App({
   store: new Vuex.Store(DashboardStore), // Setting the store to the imported

   components: {
       Settings,
   }
})
 .$mount(App.element);
```
```js
// @js/store/DashboardStore.js

import WithdrawalsStore from '@js/store/WithdrawalsStore';

export default {
   state: {},

   modules: {
       withdrawals: WithdrawalsStore, // Has `namespaced: true`
   }
)
```
```js
// @js/components/Settings.vue

export default {
   name: 'Settings',

   methods: {
       ...mapMutations({
         setWithdrawalSystems: 'withdrawals/setSystems', // This is NOT seen by PhpStorm
       })
   }
}

How it does look like when IDE does not see the module:

---

Environment

The IDE built-in Vue.js plugin version: 232.10072.32.

IDE information:

PhpStorm 2023.2.3
Build #PS-232.10072.32, built on October 13, 2023
Licensed to [...]
Subscription is active until July 31, 2024.
Runtime version: 17.0.8.1+7-b1000.32 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.19.0-35-generic
GC: G1 Young Generation, G1 Old Generation
Memory: 8192M
Cores: 4
Registry:
   run.processes.with.pty=TRUE
   documentation.show.toolbar=true
   caches.scanningThreadsCount=3
   ide.experimental.ui=true
Non-Bundled Plugins:
   OpenGL-Plugin (1.0.72)
   com.nasller.CodeGlancePro (1.7.6)
   monokai-pro (1.10)
   com.intellij.ideolog (222.1.0.0)
   String Manipulation (9.11.3)
   dev.meanmail.plugin.nginx-intellij-plugin (2022.1.1)
   de.espend.idea.php.annotation (9.4.0)
   net.seesharpsoft.intellij.plugins.csv (3.2.2-232)
   com.atlassian.bitbucket.references (2022.1.242)
   izhangzhihao.rainbow.brackets (2023.3.6)
   zielu.gittoolbox (500.0.21+222)
   mobi.hsz.idea.gitignore (4.5.2)
Current Desktop: KDE

---

What might it be? Is it a bug of the Vue plugin in the IDE, or is it not a common practice to import the main store that way?

Best and kind regards ✨