animate:flip does not react to changing the property of an object in the array/changing the style of the dom element

[interk0t]

Hello! I use Svelte 5
and I encountered a problem where when changing an object property that affects the inline style in the markup, the animate:flip directive does not respond to this change and does not animate the grid-column and grid-row properties, in the example I set the occupied area of ​​the element via the toggleSize function

let items = $state([
        { id: 0, name: 'small', color: 'aquamarine', column: 1, row: 1, width: 60, height: 60 },
        { id: 1, name: 'small', color: 'orange', column: 1, row: 1, width: 60, height: 60 },
        { id: 2, name: 'small', color: 'red', column: 1, row: 1, width: 60, height: 60},
        { id: 3, name: 'small', color: 'blue', column: 1, row: 1, width: 60, height: 60 },
        { id: 4, name: 'small', color: 'pink', column: 1, row: 1, width: 60, height: 60 },
        { id: 5, name: 'small', color: 'purple', column: 1, row: 1, width: 60, height: 60 },
        { id: 6, name: 'normal', color: 'salat', column: 1, row: 1, width: 136, height: 136 },
        { id: 7, name: 'middle', color: 'green', column: 2, row: 1, width: 300, height: 136 },
        { id: 8, name: 'large', color: 'yellow', column: 2, row: 2, width: 300, height: 300 },
 ]);

 function toggleSize(item: any) {
        item.column = item.column + 1;
 }

<section
        class="section"
    >
        {#each items as item, index (item.id)}
            <div
                class="wrapper"
                animate:flip={{ duration: 300 }}
                style:grid-column={'span ' + item.column}
                style:grid-row={'span ' + item.row}
            >
                <div
                    class="item"
                    style:background-color={item.color}
                    style:width="{ui.s(item.width)}px"
                    style:height="{ui.s(item.height)}px"
                >
                    {item.name}
                    {item.column}
                    <button onclick={() => toggleSize(item)}> toggleSize</button>
                </div>
            </div>
        {/each}
    </section>

but if you use this approach, similar to svelte 4, then animate:flip beautifully animates blocks in the grid

function toggleSize(item: any) {
    item.column = item.column + 1; 
    items = [...items];
}

and the second question is that animate:flip also does not respond to changes in the property of the element, for example, if I want to set the gridColumn value by assigning it to it via js directly from the node link like this

wrapperRef.style.gridColumn = span ${prevColumn + 1};

How can I make it react and animate using animate:flip in both the first and second (more important) cases? Thank you