Reactivity of primitives using reactive in Vue 3

Question

According to the docs, primitives shouldn't become reactive when using reactive wrapper, that's why in this case we should go with ref. The same situation is when we want to reassign the entire object instead of mutating it.

My question is why in the following snippets counter2 and state2.counter start working correctly when we uncomment the commented lines?

<script setup>
import { ref, reactive } from 'vue';
  
let counter1 = ref(0);
let counter2 = reactive(0);
  
const increment = () => { 
  // counter1.value++;
  counter2++;
}
</script>

<template>
  <h3>counter1 {{ counter1 }}</h3>
  <h3>counter2 {{ counter2 }}</h3>
  <button @click="increment">increment</button>
</template>

Playground: link

<script setup>
import { ref, reactive } from 'vue';
  
let state1 = ref({ counter: 0 });
let state2 = reactive({ counter: 0 });
  
const increment = () => { 
  // state1.value = { counter: state1.value.counter + 1 };
  state2 = { counter: state2.counter + 1 };
}
</script>

<template>
  <h3>counter1 {{ state1.counter }}</h3>
  <h3>counter2 {{ state2.counter }}</h3>
  <button @click="increment">increment</button>
</template>

Playground: link

Answer 1

Vue detects the mutation to counter1 and re-renders the entire component which includes the updated counter2 value. You're seeing the updated counter2 value due to the re-render caused by the change to counter1. Mutating counter2 alone will not trigger a render because it isn't reactive.