1<script setup lang="ts">
2// Client-hydration probe: the button only works (and only flips its
3// data-hydrated marker) after Vue hydrates on the client.
4const count = ref(0);
5const hydrated = ref(false);
6onMounted(() => {
7 hydrated.value = true;
8});
9</script>
10
11<template>
12 <main>
13 <p id="count">count:{{ count }}</p>
14 <button
15 id="increment"
16 :data-hydrated="hydrated ? 'true' : 'false'"
17 @click="count++"
18 >
19 +1
20 </button>
21 </main>
22</template>