At what point are props contents available (and are they reactive once they are)?

Question

I pass data into a component via props:

<Comment :comment="currentCase.Comment" @comment="(c) => currentCase.Comment=c"></Comment>

currentCase is updated via a fetch call to an API during the setup of the component (the one that contains the line above)

The TS part of <Comment> is:

<script lang="ts" setup>

import { Comment } from 'components/helpers'
import {  ref, watch } from 'vue'

const props = defineProps<{comment: Comment}>()
const emit = defineEmits(['comment'])

console.log(props)
const dateLastUpdated = ref<string>(props.comment?.DateLastUpdated as string)
const content = ref<string>(props.comment?.Content as string)
watch(content, () => emit('comment', {DateLastUpdated: dateLastUpdated, Content: content}))

</script>

... where Comment is defined in 'components/helpers' as

export class Comment {
  DateLastUpdated?: string
  Content?: string

  public constructor(init?: Partial<Case>) {
    Object.assign(this, init)
  }
}

content is used in the template, but is empty when the component is rendered. I added a console.log() to check whether the props were known - and what is passed is undefined at that point:

▸ Proxy {comment: undefined}

When looking at the value of the props once the application is rendered, their content is correct:

{
    "comment": {
        "DateLastUpdated": "",
        "Content": "comment 2 here"
    }
}

My question: why is comment not updated when props are available (and when are their content available?)

I also tried to push the update later in the reactive cycle, but the result is the same:

const dateLastUpdated = ref<string>('')
const content = ref<string>('')

onMounted(() => {
  console.log(props)
  dateLastUpdated.value = props.comment?.DateLastUpdated as string
  content.value = props.comment?.Content as string
  watch(content, () => emit('comment', {DateLastUpdated: dateLastUpdated, Content: content}))
})

Answer 1

Vue lifecycle creates component instances from parent to child, then mounts them in the opposite order. Prop value is expected to be available in a child if it's available at this time in a parent. If currentCase is set asynchronously in a parent, the value it's set to isn't available on component creation, it's a mistake to access it early.

This disables the reactivity:

content.value = props.comment?.Content as string

props.comment?.Content === undefined at the time when this code is evaluated, it's the same as writing:

content.value = undefined;

Even if it weren't undefined, content wouldn't react to comment changes any way, unless props.comment is explicitly watched.

If content is supposed to always react to props.comment changes, it should be computed ref instead:

const content = computed(() => props.comment?.Content as string);

Otherwise it should be a ref and a watcher:

const content = ref();
const unwatch = watchEffect(() => {
  if (props.comment?.Content) {
    content.value = props.comment.Content;
    unwatch();
    ...
  }
});