Why is some data undefined when navigating to the page?

Question

Vue.js

UPD: I solved the issue by simply adding the data itself to the v-if check. Everything began to work as it should, in fact, why is it necessary to do so? Some crutch.
Decision:

<div class="comments_items_title">{{card.comments && card.comments.length}} комментариев </div>
            <div class="comments_items" v-if="card.comments && card.comments.length">
                <Comment v-for="comment in card.comments"
                        :key="comment._id"     
                        :comment="comment"   
                />
            </div>
            <div v-else>Комментариев нет</div>
            <CommentForm 
            :id="card && card._id"
            @created="createCommentHandler"
            />

When going to a dynamic page.

<template>
<div>
    <component :is="res"/>
</div>
</template>
<script>
export default {
    async asyncData({store, params}) {
        const res = await store.dispatch('data/getData', params.slug)
        return {res}
    }
}
</script>

The component is rendered to me depending on the response.
The component itself

<template>
<div>
        <h1 class="mb28">{{this.card.title}}</h1>

        <footer class="comments">
            <div class="comments_items_title">{{card.comments.length}} комментариев </div>
            <div class="comments_items" v-if="card.comments && card.comments.length">
                <Comment v-for="comment in card.comments"
                        :key="comment._id"     
                        :comment="comment"   
                />
            </div>
            <div v-else>Комментариев нет</div>
            <CommentForm 
            :id="card._id"
            @created="createCommentHandler"
            />
        </footer>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            card: ''
        }
    },
    async fetch() {
        const res = await this.$store.dispatch('card/fetchById', this.$route.params.slug)
        await this.$store.dispatch('card/addView', res)
        this.card = res
    },
    methods: {
        createCommentHandler(comment) {
            this.card.comments.push(comment)
        }
    }
}
</script>

When switching to a dynamic page, a component is rendered, where it receives data from the server using fetch.
After the transition, I get an error - Cannot read property 'length' of undefined . When you refresh the page, everything starts working. But, if I go to the main page and go to the dynamic page again, the same error occurs.
But if I remove the comments component, where there is the same length property, then everything works as it should.
Why is this happening? I get the data as it should and they are already there when I go to the page. What is the problem?

Answer 1

I won’t say for vue specifically, but in general this is treated with several options - elvis, i.e. card?.comment?.length, or by initializing an empty array, i.e. card.comments = [], or top-level condition v-if='card'