The fetchData usage in the tutorial step 10 is unsafe.

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.

Start by reading the Step 10 tutorial and src/tutorial/src/step-10/_hint/App/composition.js at the referenced line, focusing on how the watcher invokes fetchData from the <script setup> block. Done when the example no longer demonstrates an unsafe setup-time request, or clearly directs readers to safe request and side-effect guidance.