Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a custom hook, where I have a local state: But it seems, when i export the state with toRefs(), and use the state is another component, I get the error: "Type 'Ref' is not assignable to type 'boolean'"

The hook:

interface StateModel {
  isLoading: boolean;
  isError: boolean;
  errorMessage: string;
  data: object | null;
export default function useAxios(url: string, data: object) {
  const state: StateModel = reactive({
    isLoading: true,
    isError: false,
    errorMessage: '',
    data: null
  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),
    fetchData
The component where im using the state and where I get the TS compile error:
setup() {
    const state: StateModel = reactive({
      data: null,
      isLoading: true
    const { data, isLoading, fetchData } = useAxios(
      '/test_data/campaign.json',
    const getCampaignData = async () => {
      await fetchData();
      state.data = data as CampaignModel;
      state.isLoading = isLoading; // ERROR HERE: Type 'Ref<boolean>' is not assignable to type 'boolean'
    onMounted(() => {
      getCampaignData();
    return {
      ...toRefs(state)
Why is it that the TS compiler is complaining? I've already defined in the Hook that it's a boolean?
                Awesome, thanks a lot... But if I do the same for data, it seems to loose the TS binding in my template?  state.data = data.value as CampaignModel;  Maybe another problem, but nevertheless, I dont quite understand why? :) Any ideas?
– envy
                Mar 9, 2021 at 8:47
                This answer taught me things about Vue3 I didn't know I was missing. That is, ref() const variables and how to interact with them on the Javascript side.
– Frederick Haug
                Feb 8, 2022 at 23:03
                what about computed properties? . Those throw the same error yet there is no .value to access ..
– Berni
                Oct 30, 2022 at 15:14
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.