Loader.vue

<template>
  <slot v-scope="api" />
</template>

<script>

export default {
  props: {
    data: Function
  },

  data: () => ({
    data: null,
    loading: true,
    failed: false,
    error: null,
  }),

  watch: {
    data() {
      this.retry()
    }
  },

  created() {
    this.retry()
  },

  methods: {
    retry() {
      this.loading = true

      try {
        this.data = await this.data()
        this.failed = false
      } catch (err) {
        this.error = err
        this.failed = true
      }

      this.loading = false
    }
  },

  computed: {
    api() {
      return {
        retry: this.retry.bind(this),
        failed: this.failed,
        loading: this.loading,
        data: this.data
      }
    },
  }
}

</script>