VueJS: dynamic component loses it`s props after reloading - vue.js

Question

I have a django rest_framework as a server and vuejs for a client side. There is an index page like '/' where i`m using v-for to iterate an array of objects to show some item's cards. Each card has a button to the '/info'(which is dynamically changed with /:slug in a router) like so:
...
<RouterLink :to="{name: 'contentItemInfo', params: {item: item, slug: item.slug} }">
<button class="card-button btn fade-in">
...
</button>
</RouterLink>
...
Then, when we press the button, we are going to '/:slug' and passing the item param to props, using it like so:
...
<video class="video" type="video/mp4" autoplay loop :src="item.trailer"/>
<h3 class="video-info-h3 px-5 py-1 rounded">{{ item.title }}</h3>
<h5 class="video-info-h5 px-5 py-1 rounded">{{ item.subtitle }}</h5>
<p class="video-info-p px-5 py-1 text-wrap rounded">{{ item.description }}</p>
...
export default {
name: "ContentItemInfo",
components: {Footer, Navbar},
props: [
'item'
],
}
Works for now, but when i reload the page, all the content disappeare and got undefined of all item`s values
How should i make it work after reloading?

Answer 1

Passing complex objects by route param only works in-memory. Once you reload the page, the only data you have is strings from the URL. You'll have to load the item data from your backend for fresh page loads.
Try something like this, making the item prop optional and loading the data if it's not set
export default {
name: "ContentItemInfo",
components: {Footer, Navbar},
props: {
item: {
type: Object,
default: null
},
slug: String // set from the route param
}
data: vm => ({
video: vm.item // initialise a local copy so you can update it if required
}),
async created () {
if (this.video === null) {
// just guessing with this bit
const { data } = await axios.get(`/api/video-for-slug/${encodeURIComponent(this.slug)}`)
this.video = data
}
}
}
and your template
<div v-if="video">
<video
class="video"
type="video/mp4"
autoplay
loop
:src="video.trailer"
/>
<h3 class="video-info-h3 px-5 py-1 rounded">{{ video.title }}</h3>
<h5 class="video-info-h5 px-5 py-1 rounded">{{ video.subtitle }}</h5>
<p class="video-info-p px-5 py-1 text-wrap rounded">{{ video.description }}</p>
</div>
<p v-else>Loading...</p>
In the above, I assumed that your routes are passing params as props. If not, see https://router.vuejs.org/guide/essentials/passing-props.html