Access to value of useFetch in script section

Question

I have this Vue code:

<template>
  <main>
    <h1>{{ article.data.title }}</h1>
    <i>{{ article.data.date }}</i>
    {{ article.data.text }}
    <ul class="tags">
      <li>
        <a href="#">{{ article }}</a>
      </li>
      <li>
        <a href="#">{{ tags }}</a>
      </li>
    </ul>
  </main>
</template>

<script>
  import { useFetch } from '@vueuse/core'

  export default {
    data() {
      return {
        article: null,
        tags: null
      }
    },
    created() {
      this.$watch(
        () => this.$route.params,
        () => {
          this.getData()
        },
        { immediate: true }
      )
    },
    methods: {
      getData() {
        const article = useFetch("http://0.0.0.0:8000/api/article/" + this.$route.params.slug, {
          refresh: true
        }).json()

        const tags = useFetch("http://0.0.0.0:8000/api/article/tags/" + article.data.id, {
          refresh: true
        }).json()
        this.article = article
        this.tags = tags
      }
    }
  }
</script>

I need to fetch article data and after that, I need access to article.data.id for fetching tags data.

How I can do that?

I tried article.data.id and this.article.data.id, but it didn't work.

I am using Vue 3.3.10 and Vueuse 10.7.0

I'm a newbie, don't kill me please =)