vuejs lifecycle hooks mounted push computed

Question

I want to send the data from axios in mounted to the menuItem function in computed, but I have not been successful. Where am I doing wrong?

<template v-slot:MenuItem>
  <MenuItems
    v-for="(Item, Index) in menuItem"
    :key="Index"
    :items="Item"
    :depth="Index"
  >
    <router-link :to="Item.path">{{ Item.name }}</router-link>
  </MenuItems>
</template>

<script>
export default {
  name: 'Nav',
  data() {
    return {}
  },
  computed: {
    menuItem() {
      return [
        {
          name: this.$t('navbar.home'),
          path: '/',
        },
        {
          name: this.$t('navbar.gallery'),
          path: '/gallery',
        },
        {
          name: this.$t('navbar.contact'),
          path: '/contact',
        },
      ]
    },
  },
  async mounted() {
    const res = await axios.get('http://localhost:3000/categories')
    if (res.status === 200) {
      const arr = res.data.data
      arr.forEach((value, index) => {
        this.menuItem.push({
          name: value.title,
          path: '/' + value.slug,
        })
      })
    }
  },
}
</script>