Mutation not appearing under Vuex extension - vue.js

Question

I'm not sure why there's no mutation when I check it under Vuex extension when I'm on "127.0.0.1:8000/products/create". No idea what other files are needed in order to solve this. Please, let me know. I'll then add them ASAP.
Thank you very much in advance for looking into this
I'm following this tutorial:
https://www.youtube.com/watch?v=bdvaBsuqDAM&list=PLVIT7EMonV3dWOIjbQxQ2jxhywnjFb7Hy&index=18
No mutation - no good
With mutation - very good
resources > js > components > products > ProductAdd.vue
<script>
import { store } from "../../store"
import * as actions from "../../store/action-types"
export default {
mounted() {
// Get categories
store.dispatch(actions.GET_CATEGORIES)
}
}
</script>
resources > js > store > modules > categories > index.js
import actions from "./actions";
import getters from "./getters";
import mutations from "./mutations";
const state = {
categories: {},
};
export default {
state,
actions,
getters,
mutations,
};
resources > js > store > modules > categories > actions.js
import * as actions from "../../action-types";
import * as mutations from "../../mutation-types";
import axios from "axios";
export default {
[actions.GET_CATEGORIES]({ commit }) {
axios
.get("/api/categories")
.then((res) => {
if (res.data.success == true) {
commit(mutations.SET_CATEGORIES, res.data.data);
}
})
.catch((err) => {
console.log(err.response);
});
},
};
resources > js > store > action-types.js
// Categories
export const GET_CATEGORIES = "GET_CATEGORIES";
resources > js > store > modules > categories > mutations.js
import * as mutations from "../../mutation-types";
export default {
[mutations.SET_CATEGORIES](state, payload) {
state.categories = payload;
},
};
resources > js > store > mutation-types.js
// Categories
export const SET_CATEGORIES = "SET_CATEGORIES";
app > Http > Controllers > CategoriesController.php
// HANDLE AJAX REQUEST
public function getCategoriesJson() {
$categories = Category::all();
return response()->json([
'success' => true,
'data' => $categories
], Response::HTTP_OK);
}
resources > js > store > index.js
import { createStore } from "vuex";
// Modules
import categories from "./modules/categories";
// Create a new store instance.
export const store = createStore({
modules: {
categories,
},
});
resources > js > app.js
require("./bootstrap");
import { createApp } from "vue";
import { store } from "./store";
import ProductAdd from "./components/products/ProductAdd.vue";
const app = createApp({});
app.component("product-add", ProductAdd);
app.use(store);
app.mount("#app");