Is it possible to use local prefetched reactive variables and deal with their initial state without Pinia?

[the-illarionov]

I have this page component:

<script setup>
import { ref, onServerPrefetch } from 'vue';

const src = ref("")

onServerPrefetch(async () => {
	src.value = await fetch("http://localhost:1337/api/pages/1?populate[pageZone][populate]=*").then( r => r.json())
})
</script>
<template>
	<img :src="src" />
</template>

The problem is when i open the page, src equals to "" (but in the source code i have right img src attribute prerendered on the server). It felt awkward, but then i understood, that it is totally logical, because after hydration src is blank and it rewrites the one that was in the source code.

In the documentation is said that i need to deal with initial state and Pinia. And it works.

But my question is: do i really need Pinia for that? Is there any way how to deal with that local reactive variables without Pinia? Because Pinia is singletone, i don't feel comfortable polluting it with such kind of variables.