Version

3.2.20

Reproduction link

codepen.io/manl-t/pen/WNEROyJ

Steps to reproduce

So with {{ thread.title }} I get: Cannot read properties of undefined (reading 'title')

Yet this works fine:

The script:

props: { id: { required: true, type: String } }, mounted() { fetch('http://localhost:3000/threads') .then(res => res.json()) .then(data => this.threads = data) .catch(err => console.log(err)) }, data( ) { return { threads: [] } }, computed: { thread () { return this.threads.find(t => t.id === this.id) } } }

What is expected?

I am building a forum, and passing the thread id dynamically via router-link as a prop. At the same time I am getting all the threads on the mounted hook, and then using a computed property to find the thread that corresponds to the id prop.

What is actually happening?

If on the template I inject the whole thread, it works perfectly. But, if I try to access one single element of it, I get an error saying that it can't get that element from undefined.

Could this be something to do with different timings between receiving the props and the mounted hook in relation to the creation phase and the execution phase? In any case, what is the correct way to get around this?

Duplicate of #4841