Как правильно реализовать присвоение данных с api в Nuxt?

использую composition api. Как правильно реализовать присвоение данных с api в form?

import {
  defineComponent,
  reactive,
  useContext,
  useFetch,
} from '@nuxtjs/composition-api'
export default defineComponent({
  components: {
    IconUpload,
  },
  setup() {
    const { $axios, params } = useContext()

    const form = reactive({
      id: 0,
      path: '',
      image: '',
      title: '',
      description: '',
      meta_title: '',
      meta_description: '',
      meta_keywords: '',
      text: '',
      slug: '',
    })

    useFetch(async () => {
      await $axios
        .$get(`/v1/admin/page/${params.value.pageId}`)
        .then((response) => {
          form.id = response.data.id
          form.path = response.data.path
          form.image = response.data.image
          form.title = response.data.title
          form.description = response.data.description
          form.meta_title = response.data.meta_title
          form.meta_description = response.data.meta_description
          form.meta_keywords = response.data.meta_keywords
          form.text = response.data.text
          form.slug = response.data.slug
        })
    })

    function update() {
      this.$axios
        .$put(`/v1/admin/page/${this.form.id}`, this.form)
        .then((response: any) => {
          console.log(response.data.message)
        })
        .catch((error) => {
          console.log(error)
        })
    }
    return { form, update }
  },
})
</script>

Ответы (0 шт):