I have a bug related to data scoping (I think) in a Shopify collections page. Only the section that updates the collection object, has access to its updated runtime values.

When a filter value is changed within a section, the collection data retains its state only within that section. It is SCOPED to the section.

How can I use the updated collection object, outside of the section?

Please see a simplified example of code the below. Part of the issue is i do not understand the relevance of the “data-” fields on the section tag, and i cannot find any documentation on them.

 <section
  data-section-type="collection-template"
  data-section-id="{{ section.id }}"
  data-filters-type="{{ section.settings.filters_type }}"
  data-filters-position="{{ section.settings.sidebar }}"
  data-enable-filters="{{ section.settings.show_filter }}"
  data-enable-sorting="{{ section.settings.show_sorting }}"
  data-show-col-switchers="{{ section.settings.show_columns_switcher }}"
  data-pagination-type="{{ section.settings.paginate_type }}"
  data-product-count="{{ collection.products.size }}"
  data-initial-column="{{ initial_column }}"
  data-view="{{ template.name }}"
>
    {%- for filter in collection.filters -%}
       {%- for value in filter.values -%}
          {% if value.active %}
            <div>
             {{ value.label }}
            </div>   
          {% endif %}
       {%- endfor -%}
     {%- endfor -%}
    <!-- Keeps updated here^ -->

    <!-- Filter components are here that update the values -->
</section>


<div>
    {%- for filter in collection.filters -%}
       {%- for value in filter.values -%}
          {% if value.active %}
            <div>
             {{ value.label }}
            </div>   
          {% endif %}
       {%- endfor -%}
     {%- endfor -%}

     <!-- Doesn't keep updated here ^ , only shows initial values on load. -->
</div>
   

The intended output is to access the updated collection object outside of the section that it was updated in.