title: VueJS: are multiple Single file components each a vue instance or nested objects?
body: <p>In VueJS, are multiple Single file components (as parent-child), each a vue instance nested inside root instance? Why I've this assumption, is because each component can have the same properties i.e. <code>data</code>, <code>methods</code>, <code>template</code>, life-cycle hooks (<code>mounted</code>, <code>created</code> etc) akin to a root Vue instance or say like a vue instance in a non SFC setup.</p>
  
  <p>To me it appears, any web-pack + vue-loader Single File Components setup are nested objects exported as JS objects and imported in parent component i.e. child is nested inside parent component which is nested inside a single root vue instance. </p>
  
  <p>Basically, simply put there is only a single root instance and SFC are nested objects. As Sarah Drasner writes in the below linked css-tricks article:</p>
  
  <blockquote>
    <p>You can have more than one instance in an application. Typically, we'll have one instance and several components, as the instance is the main app. <a href="https://css-tricks.com/intro-to-vue-2-components-props-slots/" rel="nofollow noreferrer">src</a></p>
  </blockquote>
  
  <p>Can anybuddy shed more light on this as to which assertion is correct i.e SFC are each vue instances or they are nested objects inside a single root vue instance. If the latter turns out to be the correct case, why each can have lifecycle hooks akin to the root vue instance.</p>
  
  <p>Technically, how does Vue make SFC act like separate Vue instances but still be nested objects inside a single root instance?</p>
  
  <p>Thanks</p>