title: How to destructure object props in Vue the way like you would do in React inside a setup?
body: <p>I am wondering how to destructure an object prop without having to type <code>data.title</code>, <code>data.keywords</code>, <code>data.image</code> etc. I've tried spreading the object directly, but inside the template it is undefined if I do that.</p>
  <p>Would like to return directly <code>{{ title }}</code>, <code>{{ textarea }}</code> etc.</p>
  <p>My code:</p>
  <pre class="lang-js prettyprint-override"><code>   &lt;template&gt;
        &lt;div&gt;
          &lt;h1&gt;{{ title }}&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      
      &lt;script lang=&quot;ts&quot;&gt;
      import { useSanityFetcher } from &quot;vue-sanity&quot;;
      import { defineComponent, reactive, toRefs } from &quot;vue&quot;;
      
      export default defineComponent({
        name: &quot;App&quot;,
        setup: () =&gt; {
          const articleQuery = `*[_type == &quot;article&quot;][0] {
              title,
              textarea,
          }`;
      
          const options = {
            listen: true,
            clientOnly: true,
          };
      
          const res = useSanityFetcher&lt;any | object&gt;(articleQuery, options);
          const data = reactive(res.data);
      
          return toRefs(data);
        },
      });
      &lt;/script&gt;
  </code></pre>