Why does this JS code not work in a Vue component template?

My question title might be wrong but this is the basic code:

const messages = [
{"userid": 1, 
"messageid": 80, 
"Statuses":[{"userid": 1, "statusid": 1}, {"userid": 5, "statusid": 2}, {"userid": 99, "statusid": 1}, {"userid": 26, "statusid": 4}]
},
];

messages.forEach((message)=>{
console.log(message.Statuses.find((status)=>status.userid === 99).statusid===1);
})

What I am trying to do is find the object within Statuses array where the userid is 99 and then check if the statusid===1. The above code works and returns true/false if there is a match.

If I use the same code in a Vue template it fails e.g.:

<ul>
  <li v-for="message in messages">
    <div v-if="message.Statuses.find((status)=>status.userid === 99).statusid===1">
    <p>Status is 1</p>
    </div>
  </li>
</ul>

I get an error saying "message.Statuses.find(...) is undefined".

If I change the code to remove the statusid check then it works fine:

 <div v-if="message.Statuses.find((status)=>status.userid === 99)">

What’s up with this and how can I do this within the template HTML?