Does ref() work with Set?

[anchan42]

I can't get it to work with Set but reative() works fine. Is this intensional or a bug?

The watch on the set below would not work but if I change is to use reactive() instead, it would work.

<script setup>
import { ref,watch,reactive } from 'vue'
const msg = ref('Hello World!')
const testSet = ref(new Set());
const testInt = ref(5)

watch([testSet],()=>{
  console.log(testSet.value);
})
watch([testInt],()=>{
  console.log(testInt.value);
})

const updateTestSet = ()=>{
    testSet.value.add(Math.random());
}
const updateTestInt = ()=>{
    testInt.value = Math.random();
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <button @click="updateTestSet">TEST SET</button>
  <button @click="updateTestInt">TEST INT</button>
</template>

[LinusBorg]

Watch is not deep by default. if you put the set in a ref, and then watch the ref, then the watch only triggers if you assign a new value to the ref, not if you mutate the set within the ref.

[anchan42]

Thanks, I think I understand now. It would work if I watch testSet.value or put the deep option in.
I think this bit of the documentation throw me off.

When you call watch() directly on a reactive object, it will implicitly create a deep watcher - the callback will be triggered on all nested mutations: