如何观察对象更改然后分配给新对象并格式化数组值？

Question

appointments: {
    monday: {
        isOpen: true,
        hours: [{
                   open: "10:10", close: "18:10",
               }]  
 },
    tuesday: {
        isOpen: true,
        hours: [{
                   open: "08:00", close: "13:00",
                },
                {
                   open: "14:00", close: "18:00",
               }]  
 },
},

这是我期望的数据格式。最初 open 和 close 是一个日期对象。我正在尝试使用新对象重新初始化它，并在检测到更改时使用 moment() 对其进行格式化。

我正在使用 watch 来检测值更改时的更改。但是如何分配给新对象并格式化该值？

watch: {
        appointments: {
            handler: function(val, oldVal) {
                // const test = val.map(item => {
                //       moment(...).format('HH:mm');
                //     return ..
                // })
            },
            deep: true
        },
    },

这是我在尝试上述方法时遇到的错误。

TypeError: val.map is not a function
    at Proxy.handler (app.js:154268)
    at callWithErrorHandling (app.js:127648)
    at callWithAsyncErrorHandling (app.js:127657)
    at Array.job (app.js:129519)
    at flushPreFlushCbs (app.js:127820)
    at flushJobs (app.js:127861)
    at flushJobs (app.js:127892)