title: When to use setup() hook of Vue Composition API
body: <p>As the <a href="https://vue-composition-api-rfc.netlify.com/" rel="noreferrer">composition api</a> of Vue has ported for the <a href="https://github.com/vuejs/composition-api" rel="noreferrer">current version, v2</a>, apparently we can start to use it before the release of the new version.</p>
  
  <p>The examples generally feature a newly introduced <code>setup()</code> hook, and it is depicted <a href="https://vue-composition-api-rfc.netlify.com/#api-introduction" rel="noreferrer">alone</a> and or along with basic <a href="https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e" rel="noreferrer">JS functions</a>. </p>
  
  <p>At first glance I thought it is simply a place for initializing <strong>reactive</strong> data and I'd ask sth like: <em>in what cases should it be used</em>.</p>
  
  <p>However, when you dig more, it looks as if composition API cannot be implemented without it. So, what is the thing with that hook and can it be used with <code>data</code>, <code>methods</code>, <code>computed</code> etc. fields outside it?</p>