https://medium.com/@hang.c/build-a-data-fetching-hook-with-vue-composition-api-6b373bbaaf1

Component.vue

<template>
  <div>
    <label>User Query:</label>
    <input v-model="query" :disabled="loading" ></input> 
    <button @click="getData" :busy="loading" />
    <User v-if="data != null || error != null" :data="data" :error="error" />
  </div>
</template>

<script>
import axios from "axios";
import User from "../components/User.vue";

export default {
  components: {
    User
  },
  data () {
    return {
      query: "", 
      loading: false,
      data: null,
      error: null
    }
  },
  methods: {
    async getData() {
      this.loading = true;
      this.data = null;
      this.error = null;
      try {
        const data = await axios.get("/api/user", { 
          params: { query: this.query }
        });
        this.data = data;
      } catch (error) {
        this.error = error;
      } finally {
        this.loading = false;
      }
    },
  },
}
</script>