x-for breaks down when new elements area added via livewire after the first page load

[viaativaweb]

How to reproduce:

in the component file:

    public $numbers = [1,2,3];

    function addNumber(){
        $this->numbers = array_merge($this->numbers, [4, 5]);
    }

In the view file:

    @foreach($numbers as $number)
        <div x-data="{arr: ['blablabla']}">
            <template x-for="text in arr">
                <div x-text="text"></div>
            </template>
        </div>
    @endforeach
    <button x-data x-on:click="$wire.addNumber()">add new elements</button>

Click on the add new elements button. It will output on the console:

Uncaught (in promise) ReferenceError: text is not defined