how to watch the class data change

[Jacobliu8]

<script setup lang=ts>
import { reactive,watch } from 'vue'

  class Test{
    a:number;
    b:Map<string,string>=new Map<string,string>();
  }
  
const msg = reactive(new Test())

const click = ()=>{
  msg.a = 123;
  console.log("++++",msg)
  msg.b.set("a","1234")
  msg.b.set("c","1234")
}

watch(()=>msg.b,(newV,oldV)=>{console.log("---",newV)})

</script>

<template>
  <h1>{{ msg.a }}</h1>
  <h1>{{ msg.b }}</h1>
  <button @click='click' >
    test
  </button>
</template>

like the codes, the watch never ouput anything at browser, anyone have some ideas?

[Jacobliu8]

<script setup lang=ts> import { reactive,watch } from 'vue' class Test{ a:number; b:Map=new Map(); } const msg = reactive(new Test()) const click = ()=>{ msg.a = 123; console.log("++++",msg) msg.b.set("a","1234") msg.b.set("c","1234") } watch(()=>msg.b,(newV,oldV)=>{console.log("---",newV)},{deep:true}) </script>

{{ msg.a }}

{{ msg.b }}

test