V-for loop in rendering HTML

I'm using the v-for loop for rendering HTML. I want to create one variable outside this for loop and want to use within th for loop while rendering HTML.

Using PHP, I can achieve the below scenario.

$messages = ["abc","abc","xyz","xyz","abc","xyz"];
$new = '';
foreach($messages as $val) {
if(($new == '' || $new == 'xyz') && $val == 'abc') {
    echo "--- ";
}
echo $val;
if(($new == '' || $new == 'abc') && $val == 'xyz') {
    echo " ---";
}
$new = $val;
echo "<br>";
}

Output

--- abc
abc
xyz ---
xyz
--- abc
xyz ---

How can I achieve the same with the vueJs. I tried,

<div v-for='(message, index2) in messages' :key='index2'>
    <p></p> </div>

via Chebli Mohamed