Gridsome this contect is undefined

Question

I can currently generate static pages using CreatePage Api as stated in the documentation https://gridsome.org/docs/pages-api/ within Gridsome.

Now I'am trying to get data within my generated page script. When I use the context to get my data like this everything works fine.

<template>
    <Layout>
      <ul>
        <li v-for="cat in $context.cats" :key="cat.id">
          {{ cat.cat_name }} - {{ cat.cat_path }}
          <ul>
            
            <li v-for="(item, index) in cat.cat_data" :key="index">
                {{ item.item_question }} - {{ item.item_path }}
            </li>

          </ul>
        </li>
      </ul>
      <hr>
    </Layout>
</template>

But now I want this data in my script-tags so that I can implement filter and search function. The script looks Something like this.

<script>
export default {
  name: "Support",
  data: function () {
    console.log(this.$context)
    return {
      filterSearch: this.$context
    }
  },
  methods: {

  }
}
</script>

However this.$context is undefined, When I console.log "this" I see the object "$context" but I see a tooltip saying: Invoke property getter. As soon as I click on the property again, the data shows up on my console.log.

So my question is how can I get the property invoked within my script tags? So that I can use the data.

I searched already on google and stackoverflow but those solution doesnt apply to my issue.