Error when using composable and reactive in Ionic Vue

I’m trying to use the Composition API with Ionic Vue but it’s throwing an error when trying to compile. The error is coming from the use-song-list.ts and the errors I’m getting are

Type 'Ref<never[]>' is missing the following properties from type 'never[]': length, pop, push, concat, and 28 more.

Type 'Ref<null>' is not assignable to type 'null'.

Type 'Ref<boolean>' is not assignable to type 'boolean'.

What am I doing wrong? Why can’t I assign the response, error and fetching constants to the songs object properties?

Below is my code.

Tab1.vue

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonList,
  IonItem,
} from "@ionic/vue";
import { reactive } from "vue";
import useSongList from "./../composables/use-song-list";

export default {
  name: "Tab1",
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonList,
    IonItem,
  },
  setup() {
    const { list, error, fetching } = useSongList();

    return {
      list,
      error,
      fetching,
    };
  },
};
</script>

useSongList.ts

import { reactive, Ref, toRefs } from 'vue';
import useFetch from './use-fetch';

export default function () {
    let songs = reactive({ list: [], error: null, fetching: false });

    const { response, error, fetchData, fetching } = useFetch("ENDPOINT_CHANGED", {});

    fetchData();

    // This is where the errors are happening.
    songs.list = response;
    songs.error = error;
    songs.fetching = fetching;

    return { ...toRefs(songs) };
}

fetchData.ts

import { reactive, Ref, toRefs } from 'vue';

export default function (endpoint: RequestInfo, options: Object) {
    const state = reactive({
        response: [],
        error: null,
        fetching: false
    });

    const fetchData = async () => {
        state.fetching = true;

        try {
            const res = await fetch(endpoint, options);
            const json = await res.json();
            state.response = json;
        } catch (errors) {
            state.error = errors;
        } finally {
            state.fetching = false;
        }
    };

    return { ...toRefs(state), fetchData };
}

1 post - 1 participant

Read full topic