Vue3のリアクティブシステムの実験

前提

Vue3の基礎についての質問です。
「Vue３　フロントエンド開発の教科書」のソースコードです。

実現したいこと

ref変数と通常の変数の表示の差（リアクティブ）を実験したい。

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

①は表示が変わらず、②は１秒毎に表示が変化することを想定しておりますが、両方の値が動いてしまいます。（本の解説もそのように書いてあります。）

（起動時）

（右側だけが変化する想定）

なにかの設定など環境の影響でしょうか？
それとも、Vueのアップデートなどで仕組みが変わったとかでしょうか。

本の通りに動かす方法など、なにかわかる方はご教授お願いいたします。

該当のソースコード

js(vue3)

1<script setup lang="ts">2import { ref } from "vue";3 4const now = new Date();5const nowStr = now.toLocaleTimeString();6let timeStr = nowStr;7const timeStrRef = ref(nowStr);8 9function changeTime(): void {10 const newTime = new Date();11 const newTimeStr = newTime.toLocaleTimeString();12 timeStr = newTimeStr;13 timeStrRef.value = newTimeStr;14}15setInterval(changeTime, 1000);16</script>17 18<template>19 <p>現在時刻: {{ timeStr }}</p> // ①20 <p>現在時刻(ref): {{ timeStrRef }}</p> // ②21</template>22

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

node: 18.12.1
vue: 3.2.45