title: vue-query return ObjectRefImpl and not the data
body: <p>vuejs community I'm a newbie on vue.js, to fetch data with vue-query, vue.js 3, and composition API, the returned data is ObjectRefImpl.
  When I print the values It returns me: Property &quot;isLoading&quot; was accessed during render but is not defined on the instance.
  So much thanks!</p>
  <p>&quot;vue&quot;: &quot;^3.2.12&quot;,
  &quot;vue-query&quot;: &quot;^1.11.0&quot;</p>
  <p>Todo.vue</p>
  <pre class="lang-js prettyprint-override"><code>import {onMounted} from 'vue';
  
  export default {
    setup() {
      const fetcher = async () =&gt; {
        await fetch('https://jsonplaceholder.typicode.com/todos').then(response =&gt;
          response.json()
        );
      };
  
      onMounted(() =&gt; {
        const {data, isError, error, isLoading} = useQuery('todos', fetcher);
        console.log(data);
        return {isLoading, isError, data, error};
      });
    }
  };
  </code></pre>
  <p>App.vue</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  import {defineComponent} from 'vue';
  import {useQueryProvider} from 'vue-query';
  import {VueQueryDevTools} from 'vue-query/devtools';
  
  export default defineComponent({
    components: {VueQueryDevTools},
    name: 'App',
    setup() {
      useQueryProvider();
    }
  });
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;VueQueryDevTools :initialIsOpen=&quot;true&quot; /&gt;
    &lt;router-view /&gt;
  &lt;/template&gt;
  </code></pre>
  <p>main.js</p>
  <pre class="lang-js prettyprint-override"><code>import {createApp} from 'vue';
  import App from './App.vue';
  import router from './router';
  import store from './store';
  
  
  import './index.scss';
  
  createApp(App)
    .use(store)
    .use(router)
    .mount('#app');
  
  </code></pre>