Why doesn't Temporal.Now.zonedDateTimeISO() work in Intl.DateFormat?

I'm working on a demo for a presentation about i18n in Javascript, Vue 3.x to be specific, and I'm trying to show that the Intl.DateFormat works with both the old Date object and the new Temporal objects.

So far, Temporal.Now.plainDateISO() and Temporal.Now.plainTimeISO() work fine with Intl.DateFormat but I get a runtime error when I try to use Temporal.Now.zonedDateTimeISO() with Intl.DateFormat while Temporal.Now.zonedDateTimeISO() works fine if I don't try to use it in with Intl.DateFormat.

The following code is what I executed:

<script setup> import { ref, computed } from "vue"; import { useI18n } from "vue-i18n"; const { t, locale, availableLocales } = useI18n(); /* Lists */ const calendars = Intl.supportedValuesOf("calendar"); const collations = Intl.supportedValuesOf("collation"); const currencies = Intl.supportedValuesOf("currency"); const numberingSystems = Intl.supportedValuesOf("numberingSystem"); const timeZones = Intl.supportedValuesOf("timeZone"); const units = Intl.supportedValuesOf("unit"); /* Date/Time/Timezones (Date/Temporal) */ const dateFormatter1 = computed( () => new Intl.DateTimeFormat(locale.value, { weekday: "long", day: "numeric", year: "numeric", month: "long", era: "short" }), ); const todayDate = computed(() => dateFormatter1.value.format(new Date())); const dateFormatter2 = computed(() => new Intl.DateTimeFormat(locale.value, { timeStyle: "long" })); const todayTime = computed(() => dateFormatter2.value.format(new Date())); const dateFormatter3 = computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: "long", timeStyle: "long"})); const todayTimestamp = computed(() => dateFormatter3.value.format(new Date())); const temporalFormatter1 = computed(() => new Intl.DateTimeFormat(locale.value, { weekday: "long", day: "numeric", year: "numeric", month: "long", era: "short"})); const todayTemporalDate = computed(() => temporalFormatter1.value.format(Temporal.Now.plainDateISO())); const temporalFormatter2 = computed(() => new Intl.DateTimeFormat(locale.value, { timeStyle: "long"})); const todayTemporalTime = computed(() => temporalFormatter2.value.format(Temporal.Now.plainTimeISO())); const temporalFormatter3 = computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: "long", timeStyle: "long"})); console.log(Temporal.Now.zonedDateTimeISO()); const todayTemporalTimestamp = computed(() => temporalFormatter3.value.format(Temporal.Now.zonedDateTimeISO())); </script> <template> <header> <nav> <div> <a href="#">{{ t("home") }}</a> <a href="#">{{ t("about") }}</a> </div> <span> <select v-model="locale" class="localeList"> <option v-for="oneLocale in availableLocales" :key="oneLocale" :value="oneLocale" > {{ oneLocale }} </option> </select> </span> </nav> </header> <main> <h1>{{ t("greeting") }}</h1> <h2>Date/Time Formats using Date</h2> <p>{{ todayDate }}</p> <p>{{ todayTime }}</p> <p>{{ todayTimestamp }}</p> <h2>Date/Time Formats using Temporal</h2> <p>{{ todayTemporalDate }}</p> <p>{{ todayTemporalTime }}</p> <p>{{ todayTemporalTimestamp }}</p> <h2>Calendars</h2> <p>These are the available calendars:</p> <ul> <li v-for="oneCalendar in calendars" :key="oneCalendar">{{ oneCalendar }}</li> </ul> <h2>Collations</h2> <p>These are the available collations:</p> <ul> <li v-for="oneCollation in collations" :key="oneCollation">{{ oneCollation }}</li> </ul> <h2>Currencies</h2> <p>These are the available currencies:</p> <ul v-for="oneCurrency in currencies" :key="oneCurrency"> <li>{{ oneCurrency }}</li> </ul> <h2>Numbering Systems</h2> <p>These are the available numbering systems:</p> <ul> <li v-for="oneNumberingSystem in numberingSystems" :key="oneNumberingSystem">{{ oneNumberingSystem }}</li> </ul> <h2>Timezones</h2> <p>These are the available timezones:</p> <ul> <li v-for="oneTimeZone in timeZones" :key="oneTimeZone">{{ oneTimeZone }}</li> </ul> <h2>Units</h2> <p>These are the available units:</p> <ul> <li v-for="oneUnit in units" :key="oneUnit">{{ oneUnit }}</li> </ul> </main> </template> <style scoped> header { padding: 1rem; background: #333; width: 100%; } h2 { margin-top: 1rem; } nav { display: flex; justify-content: space-between; } .localeList { font-size: 1.5rem; } a { text-decoration: none; color: #fff; font-size: 1.5rem; padding: 0 1rem; margin: 0 1rem; } main { padding: 2rem; } </style>

This is the Console output:

ZonedDateTime {timeZoneId: 'America/Toronto', calendarId: 'iso8601', era: undefined, eraYear: undefined, year: 2026, …}calendarId: "iso8601"day: 19dayOfWeek: 4dayOfYear: 78daysInMonth: 31daysInWeek: 7daysInYear: 365epochMilliseconds: 1773963013444epochNanoseconds: 1773963013444030029nhour: 19hoursInDay: 24microsecond: 30millisecond: 444minute: 30month: 3monthCode: "M03"monthsInYear: 12nanosecond: 29offset: "-04:00"offsetNanoseconds: -14400000000000second: 13timeZoneId: "America/Toronto"weekOfYear: 12year: 2026yearOfWeek: 2026[[Prototype]]: Temporal.ZonedDateTime main.js:22 [Vue warn]: Unhandled error during execution of render function at <App> warn$1 @ chunk-6PFJYSIW.js?v=cc6eb311:2386 logError @ chunk-6PFJYSIW.js?v=cc6eb311:2597 handleError @ chunk-6PFJYSIW.js?v=cc6eb311:2589 renderComponentRoot @ chunk-6PFJYSIW.js?v=cc6eb311:6930 componentUpdateFn @ chunk-6PFJYSIW.js?v=cc6eb311:8451 run @ chunk-6PFJYSIW.js?v=cc6eb311:689 setupRenderEffect @ chunk-6PFJYSIW.js?v=cc6eb311:8586 mountComponent @ chunk-6PFJYSIW.js?v=cc6eb311:8358 processComponent @ chunk-6PFJYSIW.js?v=cc6eb311:8310 patch @ chunk-6PFJYSIW.js?v=cc6eb311:7814 render2 @ chunk-6PFJYSIW.js?v=cc6eb311:9125 mount @ chunk-6PFJYSIW.js?v=cc6eb311:6579 app.mount @ chunk-6PFJYSIW.js?v=cc6eb311:12813 (anonymous) @ main.js:22 App.vue:30 Uncaught TypeError: Invalid argument for Temporal [object Temporal.ZonedDateTime] at ComputedRefImpl.fn (App.vue:30:72) at refreshComputed (chunk-6PFJYSIW.js?v=cc6eb311:843:29) at get value (chunk-6PFJYSIW.js?v=cc6eb311:2098:5) at unref (chunk-6PFJYSIW.js?v=cc6eb311:1953:30) at Object.get (chunk-6PFJYSIW.js?v=cc6eb311:1959:64) at Proxy._sfc_render (App.vue:64:47) at renderComponentRoot (chunk-6PFJYSIW.js?v=cc6eb311:6894:17) at ReactiveEffect.componentUpdateFn [as fn] (chunk-6PFJYSIW.js?v=cc6eb311:8451:46) at ReactiveEffect.run (chunk-6PFJYSIW.js?v=cc6eb311:689:19) at setupRenderEffect (chunk-6PFJYSIW.js?v=cc6eb311:8586:5) (anonymous) @ App.vue:30 refreshComputed @ chunk-6PFJYSIW.js?v=cc6eb311:843 get value @ chunk-6PFJYSIW.js?v=cc6eb311:2098 unref @ chunk-6PFJYSIW.js?v=cc6eb311:1953 get @ chunk-6PFJYSIW.js?v=cc6eb311:1959 _sfc_render @ App.vue:64 renderComponentRoot @ chunk-6PFJYSIW.js?v=cc6eb311:6894 componentUpdateFn @ chunk-6PFJYSIW.js?v=cc6eb311:8451 run @ chunk-6PFJYSIW.js?v=cc6eb311:689 setupRenderEffect @ chunk-6PFJYSIW.js?v=cc6eb311:8586 mountComponent @ chunk-6PFJYSIW.js?v=cc6eb311:8358 processComponent @ chunk-6PFJYSIW.js?v=cc6eb311:8310 patch @ chunk-6PFJYSIW.js?v=cc6eb311:7814 render2 @ chunk-6PFJYSIW.js?v=cc6eb311:9125 mount @ chunk-6PFJYSIW.js?v=cc6eb311:6579 app.mount @ chunk-6PFJYSIW.js?v=cc6eb311:12813 (anonymous) @ main.js:22

I get the same error if I incorporate the polyfill as if I don't use it. My browser is Brave:

Brave is up to date

Brave 1.88.134 (Official Build) (64-bit)

Chromium: 146.0.7680.153

Is this a case of the browser not having fully implemented the Temporal objects or is something else going on?