テンプレート参照の監視が動作しない

お世話になります。

vue初心者です。
表題の件、質問させてください。

現象

テンプレート参照している要素の子を変更しても、watcheffectがDOMの変更を検知しない。
以下が問題のコードです。
Vue.js公式のテンプレート参照のページを読ん書いたコードです。

Template.vue

<template>
  <h2>テンプレート参照</h2>
  <h3>テンプレート参照の監視</h3>
  <div ref="root">
    <h1 v-if="flg">hoge</h1>
    <h1 v-else>fuga</h1>
  </div>
  <button @click="change">変更</button>
</template>

<script>
  import { ref, watchEffect } from 'vue'

  export default {
    name: 'Template1',
    data() {
      return {
        flg : true
      }
    },  
    setup() {
      const root = ref(null)

      watchEffect(() => {
        console.log(root.value)
      },
      {
        flush: 'post'
      })

      return {
        root
      }
    },
    methods: {
      change() {
        this.flg = !this.flg
      }
    }
  }
</script>

変更ボタンを押下すると、子要素がhoge⇔fugaと変更されるのですが、watchEffectで変更が検知されず、ログ出力されません。
テンプレート参照で変更を検知するためには、どのように対処したらよいでしょうか?

何かお気づきの点等ございましたら、ご教示いただければ助かります。

どうぞよろしくお願い致します。