Very confusing Dusk and Vue behaviour

Very simply I have a Vue component that renders a list of messages. When the user submits a form on the page a new message is added to the list and is dynamically rendered as you would expect. This is all working fine from the user perspective.

For some reason my Dusk test has just started failing and I've spent hours trying to understand why and I've found a couple of anomalies that I can't understand.

The snippet of the component in question:

       <div dusk="show-message-messages"
            class="w-full overflow-y-auto overflow-x-hidden"
            :class="[insideIframe ? 'max-h-[600px]' : '']"
            ref="scrollContainer"
            id="message_feed"
            >
            <div v-for="message in reversedMessages" class="w-full" :dusk="'message_' + message.id" :key="message.id">

                <div
                    class="w-4/5 rounded-md mx-5 my-2 p-2 relative"
                    :class="[message.user_id !== $page.props.auth.user.id ? 'bg-gray-100': 'bg-gray-300 ml-auto']"
                >
                        <div v-html="message.message" />

                    <div class="text-xs text-right">
                        {{  methods.formatDate(message.created_at) }}
                    </div>
                    <div
                        class="absolute -bottom-3"
                        :class="[message.user_id !== $page.props.auth.user.id ? '-left-6 fill-gray-100 transform -scale-x-100': '-right-6 fill-gray-300']"
                    >
                        <CommentTail class="w-10 "/>
                    </div>
                </div>

            </div>
            <!-- {{  reversedMessages.length }} -->

        </div>

reversedMessages is the reactive list of messages that is updated when the user submits a form and the messages are rendered in <div v-html="message.message" />

In my Dusk test:

                        ->type('@show-message-new > form > div','Message 31')
                        ->click('@message_post')
                        ->waitForTextIn('@show-message-messages', 'Message 31', 60)

This times out no matter how long the wait.

However, and this is the weird bit, if I remove the absolute from the class) OR if I uncomment {{ reversedMessages.length }} the tests pass every time. In fact adding anything dynamic {{ new Date().toLocaleTimeString() }} works too.

I am so confused!