1
<script setup lang="ts">

          
2
import { shallowRef } from 'vue'

          
3


          
4
const state = shallowRef({

          
5
  count: 0,

          
6
})

          
7
</script>

          
8


          
9
<template>

          
10
  <span>Count: {{ state.count }}</span>

          
11
</template>

          
1
<script setup lang="ts">

          
2
import { shallowRef, watch } from 'vue'

          
3


          
4
const state = shallowRef({

          
5
  count: 0,

          
6
})

          
7


          
8
const increment = () => {

          
9
  state.value.count = 2 // ⚠️ doesn't trigger change (watcher & UI update)

          
10
}

          
11


          
12
watch(state, (newState) => {

          
13
  console.log('new state', newState)

          
14
})

          
15
</script>

          
16


          
17
<template>

          
18
  <span>Count: {{ state.count }}</span>

          
19
  <button @click="increment">Increment count</button>

          
20
</template>

          
1
<script setup lang="ts">

          
2
import { shallowRef, watch } from 'vue'

          
3


          
4
const state = shallowRef({

          
5
  count: 0,

          
6
})

          
7


          
8
const setNewValue = () => {

          
9
  state.value = { count: 2 } // triggers change

          
10
}

          
11


          
12
watch(state, (newState) => {

          
13
  console.log('new state', newState)

          
14
})

          
15
</script>

          
16


          
17
<template>

          
18
  <span>Count: {{ state.count }}</span>

          
19
  <button @click="setNewValue">Set new .value</button>

          
20
</template>