Vue 3 (Composition API) reactivity,refs, props

I have a Pinia store called 'categories' that looks like this:

export const useCategoryStore = defineStore('category', () => {
  const categories = ref([])

  async function fetchCategories() {
    try {
      const response = await axiosClient.get('api/categories')
      categories.value = response.data.data
    } catch (error) {
      console.log(error)
    }
  }

  return { categories, fetchCategories }
})

In one of my components, I am using this store to fetch data and retrieve the current category using a computed property. Here is the code:

<script setup>
const categoryStore = useCategoryStore()

const { categories } = storeToRefs(categoryStore)

if (categories.value.length === 0) {
  categoryStore.fetchCategories()
}


const currentCategory = computed(() => {
  return categories.value.filter((e) => e.id == props.category_id)[0]
})
</script>

And here happens thing I couldnt understand. when I

console.log(categories)

There's actual data with categories, but in proxy wrapped object, but if I

console.log(categories.value)

I'm getting empty proxy array. What's the reason of that? I can't retrieve nested values from that ref because of that (categories.value[0].id is undefined and etc.). How does this work and how to handle this kind of situations? (And exactly the same happens for currentCategory computed property. If i log currentCategory, it gives correct value but for currentCategory.value its undefined.)