I want to know relationship between vue component and vue instance

when creating a vue application by the function createApp({}). here we pass root component as object, the thing is component itself have markups. then why we mount it to html element by id

Because the intent of createApp is to create an application instance. This will merely place it in memory. You must then use .mount() to actually mount it on the DOM.

Why the extra step? Because Vue is platform agnostic - i.e. doesn’t need a browser to run.