Imported component and console message - vue.js

Question

I have a problem with props in imported component.
I imported component with dialog template and I want display text from props and it works, but I have errors in console.
In console I see this error:
[Vue warn]: Error in render: "TypeError: Cannot read property
'test' of null"
But after open dialog value is correctly.
How can I fix this problem so that the error in console doesn't show up?
My code:
<template>
<v-container fluid>
<v-row>
<v-col cols="12">
<v-card class="">
<TipItem v-for="tip in tips" :key="tip.id" v-on:open-dialog="openTipDetailsDialog(tip)"></TipItem>
</v-card>
</v-col>
</v-row>
<TipDetailsDialog :dialog="tipDetailsDialog" :tip="tipDetails" v-on:close-dialog="tipDetailsDialog = false"></TipDetailsDialog>
</v-container>
</template>
<script>
import TipItem from "../components/TipItem";
import TipDetailsDialog from "../components/TipDetailsDialog";
export default {
name: "Tips",
components: {
TipItem,
TipDetailsDialog
},
data: () => ({
tips: [],
tipDetailsDialog: false,
tipDetails: null
}),
methods: {
openTipDetailsDialog(tip) {
this.tipDetailsDialog = true;
this.tipDetails = tip;
}
}
};
</script>
TipDetailsDialog
<template>
<v-dialog
:value="dialog"
fullscreen
hide-overlay
transition="dialog-bottom-transition"
#input="$emit('close-dialog')"
>
<v-card class="rounded-0">
<v-toolbar color="primary">
<v-toolbar-title>Szczegóły</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon dark #click="$emit('close-dialog')">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
<v-container>
<v-row>
<v-col cols="6">
<v-card>
{{ tip.test }}
</v-card>
</v-col>
<v-col cols="6">
<v-card>
{{ tip.test2 }}
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "TipDetailsDialog",
props: ["dialog", "tip"]
};
</script>

Answer 1

tipDetails is initialized as null, and then bound to <TipDetailsDialog>.tip, which causes it to try to render tip.test (where tip is null).
Since TipDetailsDialog doesn't really render anything meaningful without a populated tip, that component should probably be conditionally rendered only when tipDetails is truthy:
<TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />

Answer 2

tipDetails is initialized as null, and then bound to
<TipDetailsDialog>.tip, which causes it to try to render tip.test
(where tip is null).
Since TipDetailsDialog doesn't really render anything meaningful
without a populated tip, that component should probably be
conditionally rendered only when tipDetails is truthy:
html <TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />
Or you can set a default value to the prop:
props: {
tip: {
type: String,
required: false,
default: () => ""
},
},