fetch() method is throwing error while using in component in Nuxtjs

Question

I am using fetch() method in the navigation component but when I am running my app I am seeing [Vue warn]: Property or method "menus" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property..

My Script code in navigation.

export default {
  name: 'AppHeader',
  methods: {
    async fetch ({ $content }) {
      const menus = await $content('menu').fetch()
      return {
        menus
      }
    }
  }
}

I have tried to add menus array in data but no luck.

export default {
  name: 'AppHeader',
  data () {
    return {
      menus: []
    }
  },
  methods: {
    async fetch ({ $content }) {
      const menus = await $content('menu').fetch()
      return {
        menus
      }
    }
  }
}