Vue3 деструктуризация reactive

Столкнулся с проблемой возврата из функции данных в виде return {loading, response, error, fetch}

function fetchPhonesCompany(){
    const robj = reactive({
      response: {},
      loading: false
    })
    // ... fetch
    const { loading, response } = toRefs(robj)
    return {loading, response, error, fetch}
}

и если вызываем эту функцию, то

// так ошибка, условие не сработает, так как loading уже становится не boolean а Object
const phones_company = fetchPhonesCompany()
<div v-if="phones_company.loading"></div>

// так работает
const { loading } = fetchPhonesCompany()
<div v-if="loading"></div>

Как можно вернуть все из функции в одном объекте чтобы через точку работать с одной переменной?

Решил попробовать результат поместить в реактивность, и получилось

const phones_company = reactive(fetchPhonesCompany())

но не знаю нормально ли так делать, не будет ли проблем с таким подходом?