Render race condition with `MDCCached` found with Nuxt Chat

[ChrisTowles]

I've believed i found and tracked down an issue in MDCCached caused by the watch getting out of sync.

Reproduction

• navigate to running the Nuxt UI chat-template
• use one of the labels to start a chat and if first time rendered everything works.
• now start a new chat using the same label
• that chat response from cloudflare will be cached and return almost immediately.
• the result will be the prop value and data will no longer match.
• presents it self as no loading and no rendered visible text in the component.

Resolution

watch(() => props.value, () => {
  refresh()
})

updated to include immediate prevents the values from getting out of sync.

watch(() => props.value, () => {
  refresh()
}, { immediate: true })

PR #385

[farnabaz]

Thanks for the description and reproduction. Does it only happen in development mode, or does it exist in production?
I tried to reproduce using your description, but couldn't reproduce it.