Vue3で引数として渡しているrefの値が更新されない

実現したいこと

100ms毎に更新された数値を子コンポーネントに渡して再描画させたい。

前提

Vue3 + TypeScript + Tauriを使用して、時間を表示する画面を作成しています。
「Display」というコンポーネントが時間と分を受け取って、時刻を表示します。
「App.vue」では、100msごとに時刻を更新して「Display」コンポーネントに「hour」と「minute」という引数として渡します。

発生している問題・エラーメッセージ

時刻が更新されても「Display」コンポーネントは再描画されず、hourとminuteの表示は0のままになっています。
「Display」コンポーネント内で、console.logを使用してhourとminuteの値を確認すると更新された時刻が入っていました。

該当のソースコード

typeScript
1<script setup lang="ts">
2import Display from './components/Display.vue';
3import { ref } from 'vue'
4
5
6const hour = ref(0);
7const minute = ref(0);
8
9setInterval(() => {
10    const current = new Date();
11    hour.value = current.getHours();
12    minute.value = current.getMinutes();
13  },
14  100
15);
16</script>
17
18<template>
19  <Display :hour=hour :minute=minute></Display>
20</template>

試したこと

以下のようにした場合、minuteが更新されると再描画されて表示されました。
しかし、引数として渡すと更新されないのがなぜかわかりません。

typeScript
1<script setup lang="ts">
2import Display from './components/Display.vue';
3import { ref } from 'vue'
4
5
6const hour = ref(0);
7const minute = ref(0);
8
9setInterval(() => {
10    const current = new Date();
11    hour.value = current.getHours();
12    minute.value = current.getMinutes();
13  },
14  100
15);
16</script>
17
18<template>
19  {{ minute }}
20</template>