How to correctly implement a dynamic navbar at the layout level in nuxt?

Question

Vue.js

Good evening.
How to correctly implement a dynamic navbar (loaded from the database) at the layout level in nuxt? Now done like this (layouts/default.vue). To what extent is this correct?

<template>
  <div>
    <Menu :menuitems = "menuitems" />
    <nuxt/>
  </div>
</template>

<script>
import Menu from '~/components/Menu.vue'
import api from '~/lib/api.js'
export default {
  data: function() {
    return {
      menuitems: []
    }
  },
  created: async function() {
    let a = await api.menu('top')
    this.$set(this, 'menuitems', a.menuitems)
  },
  components: {
    Menu
  }
}
</script>