title: Vue 3 - How to use reactive ref and computed without .value?
body: <p>When we use <a href="https://v3.vuejs.org/api/options-api.html" rel="noreferrer">Options API</a>, we can define some properties in the  <code>computed</code> section and some properties in the <code>data</code> section. All of them become accessible from the instance through the <code>this</code> reference, i.e. in the same object. It's very suitable.</p>
  <p>For example:</p>
  <pre class="lang-js prettyprint-override"><code>if (this.hasMore) {
     this.loading = true;
     ...
  }
  </code></pre>
  <p>Where <code>hasMore</code> is a computed property, <code>loading</code> is a reactive property.</p>
  <p>Is there any possibility to do something similar via <a href="https://v3.vuejs.org/api/composition-api.html" rel="noreferrer">Composition API</a>? For example, to implement similar code, but where <code>pagination</code> is a simple object, not a link to a component, like:</p>
  <pre><code>if (pagination.hasMore) {
     pagination.loading = true;
     ...
  }
  </code></pre>
  <p>The <a href="https://v3.vuejs.org/api/computed-watch-api.html#computed" rel="noreferrer"><code>computed</code></a> is not solution at all, because it returns <code>ref</code> and its using will be completely different than using of <code>this</code> in the example above.</p>