ловушка получения данных vue3

У меня есть собственный крючок для получения данных, которые выглядят следующим образом:

import { reactive } from 'vue';
import axios from 'axios';

interface State {
  isLoading: boolean;
  isError: boolean;
  errorMessage: string,
  data: object|null
}

export default function useAxios(url: string, data: object) {
  const state = reactive({
    isLoading: true,
    isError: false,
    errorMessage: '',
    data: null
  }) as State;

  const fetchData = async () => {
    try {
      const response = await axios({
        method: 'GET',
        url: url, // '/test_data/campaign.json'
        data: data
      });
      state.data = response.data;
    } catch (e) {
      state.isError = true;
      state.errorMessage = e.message;
    } finally {
      state.isLoading = false;
    }
  };

  return {
    toRefs(state), //TS complains over "Parameter 'state' implicitly has an 'any' type." But it's already typed in the above???
    fetchData
  };
}

Я пытаюсь использовать это в моем пользовательском компоненте, но я продолжаю получать эти данные undefined, хотя я могу видеть данные, если я выполняю console.log () в моем пользовательском хуке, где я вызываю конечную точку и регистрирую ответ .. .

Я пытаюсь использовать это так

setup() {
    const state = reactive({
      data: null
    });
    const {data, isLoading, fetchData} = useAxios(
      '/test_data/campaign.json',
      {}
    );
    const getCampaignData = async () => {
      await fetchData();
      console.log('data', data);
      state.data = data;
    };

    onMounted(() => {
      getCampaignData();
    });

    return {
      data: state.data
    };
  }

Что я здесь делаю не так? В ловушке response.data содержит данные из файла JSON, но при вызове данных из ловушки в моем компоненте он равен нулю?