Elements don't get removed when Object<Array<String>> is reset

[hkan]

Title feels weird, I didn't know how to explain it better and as short as possible.

Demo: https://codepen.io/hkanaktas/pen/JjYzqyq

Expected behavior

"fish are weird" should get removed when I click reset obj button.

Current behavior

"fish are weird" string is forgotten on the page. And more is added as the set fish button is clicked after resetting the object.

Extra info

My real use case here is: I have a validationErrors object. I set Laravel's error data (which is in Object<Array<String>> format) from 422 responses. When user resubmits the form, I simply reset them with validationErrors = {} before sending the request but the errors stay on page. But interesting enough that I don't get that repeating behavior in the demo pen.

Is this somehow my error? Maybe wrong key? Should I loop over the errors in another way?

[SimoTod]

Your template content is invalid.
It has to be a single tag, you can just wrap everything inside a div.

<template x-if="...">
<div>...everything goes here...</div>
</template>

[hkan]

Ah, damn. I knew something was wrong with my code. Thanks Simone!

[SimoTod]

No worries. 👍