title: Vue 3 - can i avoid using .value everywhere?
body: <p>I'm quite new to Vue 3 and i'm struggling a lot to understand some concepts of the composition API.
  I'm trying to port a library i'm using from vue 2 to vue 3, and in a parent element a reactive property called <code>layout</code> is passed to children components.</p>
  <p>So in the parent component i'm returning <code>layout</code> to the children like this:</p>
  <pre><code>setup(props){
      const layout = ref({'width': 10, ... })
      return {
          layout,
          ...
      }
  }
  </code></pre>
  <p>The problem is that, in order to access <code>width</code> or any other reactive value in <code>layout</code> from any children component i need to use the syntax <code>layout.value.width</code>. This is quite a problem because through the whole project <code>layout</code> is referenced with <code>layout.width</code>, this means that i need to add a <code>.value</code> to every reference to <code>layout</code> and do the same for all the other reactive variables i'm passing to my children components. Is there any way to avoid this or am i just not getting some important concepts from the composition api?</p>