Bug: Updates correct scope when x-for looping over element with x-data

[ekwoka]

solves #3447 (demos and discussion exist there)

<template x-for="item in my_array" :key="item.k">
        <div x-data="{ foo: 'bar' }" >
            <div x-text="item.x"></div>
        </div>
    </template>

When looping over an iterable with x-for, and the first child has an x-data scope, if the array changed, now containing new objects but which had the same key value, the scope would improperly update.

This fixes that.

The cause

The x-for does update the scope of the child, but it naively would update only the newest scope on the element. The problem is that this would be, during the update, the scope created by the x-data and not the x-for. The effects registered to the looped over object/values would be within the context of the x-for provided synthetic scope. This scope would continue to have the initial value.

The fix

Store reference to the scope provided by x-for and use that to directly update the synthetic scope, instead of naively updating the latest scope.

[calebporzio]

Good catch, thanks for this. Because refreshScope was only used inside x-for, I decided to pull it into x-for.js and refactor it a bit to avoid that conditional "fromXFor" flag.

Thanks again!

[ekwoka]

This can actually be optimized to just

Object.assign(reactiveScope[key], newScope)