livewire: Livewire encountered corrupt data when trying to hydrate the component issue.

Describe the bug Short: I have an array of tasks, just a 2d array with text in keys, that livewire is loosing state on.

Longer: This is a volunteer school board project that I’m going VERY YANGI on, in the hopes it takes just a few days of spare time. We have a bunch of shared tasks, that I’m putting online for the right people to see.

I made a simple checklist component and added it to the site, I haven’t even put items in a DB at this point, (perhaps that could help, but I decided to go all the way for the YAGNI)

Here is the component model, I"m just putting the whole thing in as is so it’s easy to test:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Checklist extends Component
{
    public $flash = '';
    public $question = '';
    public $tasks = [
        'setup_the_system'=>[
            'title_note' => 'Most of this section is stuff that you won\'t readily be able to see,
            for example programming this checklist and the ability to ask questions here. However,
            it\'s all very helpful in moving this forward in the easiest way possible to solve problems
            in the easiest ways we can think of.',
            'create_visual_checklist_format' => 1,
            'create_version_repository'=>1,
            'create_version_repository_note'=> 'This basically will show all versions of the project, it\'s a <em>DR</em>
            (Disaster recovery) mechanism, in case I kick the bucket, another person can take over with a list of everything
            that\'s ever been done and things that need to get done in order to move forward. I will also endeavour to
            find someone to take over for me in case that should occur.',
            'kick_bucket_replacement_volunteer_found' => 0,
            'put_up_temporary_site'=>1,
            'put_up_temporary_site_note'=>'you are on it, the data on here will constantly be destroyed and re-written
            as we get ready to make something real! As real as this feels, don\'t save anything here that is important.
            Instead email me or keep a word doc, or basically anything else other than saving real data here.',
        ],
        'PAC USE CASES (A CHECK MEANS IT\'S AGREED UPON)' => [
            'Gatekeeper authorizes guardians who register'=>1,
            'Gatekeeper authorizes guardians who register_note'=> 'The <b>"Gatekeeper"</b> is a PAC member who has access
             to information and knows which families are attending the school and which ones are not.<br><br>
             Anyone who registers need to go through a 2 step process to have access to <b><em>any</em></b> information.
             Step 1 is simply verifying their email address which they can do without any intervention from the gatekeeper.
             Step 2 requires a person to actually allow the verified guardian access to see our internal information.
             Step 2 will also need to be re-done every year.',
            'Gatekeeper is notified each time someone registers'=>1,
            'Gatekeeper is notified each time a child is registered'=>1,
            'Gatekeeper confirms child details including homeroom'=>1,
            'Gatekeeper confirms child details including homeroom_note'=> '
            This seems overwhelming for 1 person, it could even be 2 people sitting together on skype or in an office
            calling out names, it should take more than an evening or 2.
            ',

            'pac members / room reps can send notifications to their classes'=>0,
            'pac members / room reps can send notifications to their classes_note'=>'
            This is an idea, notice the unchecked box, and opinions are welcome. <br><br>
            Instead of a cumbersome trickle down human information system PAC emails me, I email my room constituents,
            perhaps school wide updates like the PAC meeting details can just be summarized and sent to the people who
            want notification. Either everyone if it\'s deemed important or, people who subscribed to news in some fashion.<br><br>
            When there are room specific issues, we could then pass those on directly as room reps.
            ',
        ],

        'GUARDIAN USE CASES (A CHECK MEANS IT\'S AGREED UPON)' => [
            'Guardian can register their children'=>1,
            'Guardian can add other guardians to their family' => 1,
            'Guardian can add other guardians to their family_note' => '
            Guardians who are added get a notification email to register',
            'Should invited guardians need to be confirmed by gatekeeper?'=>0,
            'Should invited guardians need to be confirmed by gatekeeper?_note'=>'
            For example, I go through registration and get confirmed. I then add another guardian Jane, and
            Jane gets an email to register. Jane registers and gets verified via email.<br><br>
            Does she need to get confirmed too?',
            'Guardians add children'=>1,
        ]
    ];
    
    public function render()
    {
        return view('livewire.checklist');
    }
    
    
    public function askMe()
    {
        $this->flash = $this->question;
        $this->question = '';
    }
}

<div class="">
    @if(!empty($flash))
        <div class="p-12 bg-blue-100">{{$flash}}</div>
    @endif

    <div class="flex flex-col md:flex-row">
        <div class="w-full md:w-1/2">
            @foreach($tasks as $title => $group)
                <div
                    class="font-semibold mt-4 tracking-wide text-sm uppercase text-gray-600">{{ str_replace('_',' ',$title) }}</div>
                @foreach($group as $key=>$value)
                    @if(is_array($value))
                        <div
                            class="font-semibold mt-4 ml-8 tracking-wide text-sm uppercase text-gray-600">{{ str_replace('_',' ',$key) }}</div>
                        @foreach($value as $childKey=>$childValue)
                            @if(Str::endsWith($childKey,'_note'))
                                <div
                                    class="mt-1 ml-12 pl-3 tracking-wide text-sm text-gray-600">{!! $childValue !!}</div>
                            @else
                                <label class="ml-8 flex items-center mt-2">
                                    <input type="checkbox"
                                           wire:model.lazy="tasks.{{ $title }}.{{ $key }}.{{ $childKey }}"
                                           class="form-checkbox" @selected($tasks[$title][$key][$childKey],1)>
                                    <span class="ml-2">{{ str_replace('_',' ',$childKey) }}</span>
                                </label>
                            @endif
                        @endforeach
                    @else
                        @if(Str::endsWith($key,'_note'))
                            <div
                                class="mt-1 {{ ($key != 'title_note'? 'ml-4 pl-3': '') }} tracking-wide text-sm text-gray-600">{!! $value !!}</div>
                        @else
                            <label class="flex items-center mt-2">
                                <input type="checkbox" wire:model.lazy="tasks.{{ $title }}.{{ $key }}"
                                       class="form-checkbox" @selected($tasks[$title][$key],1)>
                                <span class="ml-2">{{ str_replace('_',' ',$key) }}</span>
                            </label>
                        @endif
                    @endif
                @endforeach
            @endforeach


        </div>
        <div class="w-full md:w-1/2 mt-4">
            <div class="md:fixed md:w-5/12">
                <div class="flex flex-col w-full md:ml-12">
                    <div class="font-semibold tracking-wide text-sm uppercase text-gray-600">Questions / Concerns</div>

                    <label class="block mt-2 w-full mx-auto">
                        <div class="form-label">I'd like to know ... @error('question')<br>{{ $message }}@enderror</div>
                        <textarea wire:model.lazy="question" name="question" id="question" autocomplete=""
                                  autocapitalize="off"
                                  rows="15"
                                  class="form-input block w-full @error('question') error @enderror"
                                  placeholder="how can I help you?">{{ $question }}</textarea>
                    </label>

                    <button wire:click.prevent="askMe" class="btn brand w-full mt-6">Ask Me Stuff!</button>
                </div>
            </div>
        </div>
    </div>
</div>

It produces something like this:

To Reproduce Steps to reproduce the behavior:

1. Make a livewire enabled project
2. Add the checklist component
3. Add any input to the Ask Me a Question Field
4. Click the button

Expected behavior The flash public item will get the data from the text area

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information): Macos Catalina Brave browser, same thing happens in google chrome.

Additional context When I shrink the array down it will work or fail at some random size.

There is no way here to “key” this up without a re-implementation maybe numeric keys or task objects. But it feels unnecessary for something so small and simple.