I use Nuxtjs composition api for my project . And i wanna make my code more dynamic

Inside state object; news, world, sports... are kept datas of visited page.

state.js file

subCategoryColumnsData: { news: [], world: [], sports: [], economy: [], technology: [], life: [] },

mutation.js file

state.subCategoryColumnsData[subCategoryName] = [...getColumnsData]

category.vue

setup()
{
const columns = computed(() => store.state['subCategory'].subCategoryColumnsData[subCategoryName.value]);

const { fetch } = useFetch(async () => {
     await store.dispatch('subCategory/getColumnsQuery', 
        categories: categoryId.value, //keeps id of page 
        subCategoryName: subCategoryName.value, // to keep news, world ,sport etc page names
      });

}

Above code works without any mistake.

I can increase my page counts so i need to update subCategoryColumnsData every time. So I want to make my code more dynamic. So i changed it to:

state.js file

subCategoryColumnsData: {},

mutation.js file

state.subCategoryColumnsData[subCategoryName] = [...getColumnsData]
// this creates already something like this subCategoryColumnsData: { news: [....data], world: [] ,.... }, when web pages changed

category.vue

const columns = computed(() => store.state['subCategory'].subCategoryColumnsData[subCategoryName.value]);

when i called my state , it returns undefined. But my state is full.
when i checked store. 
If i visit another page and come to same page again, then i can see data this time . 

But if i call my state like this=>
const columns = computed(() => store.state['subCategory'].subCategoryColumnsData) 

i can see my state datas. But this includes every visited page datas. 
When i wanted to filter by adding [subCategoryName.value] , i can't reach again . It returns undefined again. 

I want to understand why i cant reach my state when i visited my page for the first time