title: component structure in Vue
body: <p>First: I'm using Vue since last night, so the answer is probably obvious.</p>
  <p>I find components with that layout:</p>
  <pre><code>&lt;template&gt;
    &lt;Slider v-model=&quot;value&quot;/&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Slider from '@vueform/slider'
  
  export default {
    components: { Slider },
  }
  &lt;/script&gt;
  
  &lt;style src=&quot;@vueform/slider/themes/default.css&quot; /&gt;
  </code></pre>
  <p>but at the same time, I also find components that are structured like a JS object:</p>
  <pre><code>app.component('button-counter', {
    data() {
      return {
        count: 0
      }
    },
    template: `
      &lt;button @click=&quot;count++&quot;&gt;
        You clicked me {{ count }} times.
      &lt;/button&gt;`
  })
  </code></pre>
  <p>Is there a practical difference? is one preferred? is one more Vue2 vs. Vue3?</p>