created runs once the component's reactive state is set up but before any DOM exists. mounted runs after the component's DOM has been created and inserted into the page.
created: data and computed properties are set up, and so are methods and watchers. But this.$el is not, because no DOM exists yet. It is a good place for API calls, setting up data, and other logic that does not touch the DOM.
mounted: the DOM is fully available, and its synchronous child components are mounted too. Use it to read or change DOM elements and to start third-party libraries that need an element.
created also runs during server-side rendering, while mounted runs only in the browser. That makes mounted the place for browser-only code.
With <script setup>, the setup code runs before both hooks, so it covers the work of created. Use onMounted() for the work of mounted.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
