`:for` loop doesn't re-render when array changes from empty to populated

[HadiAlMarzooq]

Problem

The :for loop doesn't re-render when an array prop changes from empty ([]) to populated (e.g., after async data loads). Child components aren't created even though the array contains items.

Environment

• Blits Version: 1.43.2
• Renderer Version: 2.19.1

Reproduction

// Component template
<Element>
  <ContentCard :for="(card, index) in $cards" key="$card.id" />
</Element>

// Component state
state() {
  return {
    cards: [], // Starts empty
  }
}

// Later, after async fetch:
async fetchData() {
  const data = await api.getCards()
  this.cards = data // Array populated, but :for doesn't re-render
}

Expected: :for loop creates ContentCard instances for each item
Actual: No child components are created

Root Cause

The :for loop appears to be evaluated once during component mount and doesn't reactively re-evaluate when:

• The array reference changes
• The array length changes from 0 to N
• Computed properties that return arrays change

Note

v0.9.4 included a fix for "reactivity in a forloop when initial array is empty", but this issue persists in v1.43.2, suggesting either an incomplete fix or a regression.

Impact

• Severity: Medium-High
• Frequency: Common (async data loading is standard)
• Workaround: Custom components that only mount after data is ready

I'll be submitting a fix for this in a minute.