The fetchData usage in the tutorial step 10 is unsafe.

[mmis1000]

https://vuejs.org/tutorial/#step-10 https://github.com/vuejs/docs/blob/fe15ed89b280d99de9b3950d6d1452a76455189d/src/tutorial/src/step-10/_hint/App/composition.js#L16

Current demo code of watcher in the tutorial calls fetch directly in the <script setup> block. But such usage is a known problematic pattern when use with server side rendering. It will cause the the request to be dispatched while it never use it in the html server send to client. (Because the HTML would be already sent at the point request is finished.)

Although the tutorial here is never meant to teach user how to send a request. User may copy the demo and end up using it in their production code.

Actual

The tutorial send request directly in setup script.

Expect

Move the fetchData into some client only life cycle hook like onBeforeMount / onMounted

Or

Add a explanation and a link to tutorial that properly and safely send a request/do side effects.