Apex Controller variable not updating in visualforce upon rerender

Question

This is making me slightly insane. I cannot, for the life of me, figure out how to get this dang rerendering working in Visualforce.

I am doing something like this on my visualforce page:

<apex:form id="theForm">
    <apex:outputPanel id="criteriaTableScript">
        <script>
            var criteriaTable;
            var fieldCriteriaList = JSON.parse('{!fieldCriteria}');
            function instantiateCriteriaTable(){
                var fieldCriteriaList = JSON.parse('{!fieldCriteria}');
                console.log('Updated Criteria: ', fieldCriteriaList);
                if(fieldCriteriaList.length > 0){
                    dependencyTable.destroy();
                    $Lightning.use('FSTR:FieldUpdateApp', function(){
                        console.log('Creating lightning component');
                        $Lightning.createComponent(
                            'c:CriteriaTableViewComponent',
                            {
                                Id: '{!myObj.Id}',
                                criteriaObject: 'Criteria__c',
                                criteria: JSON.parse('{!fieldCriteria}')
                            },
                            'sfd-section',
                            function(cmp){
                                criteriaTable = cmp;
                                console.log('Component created');
                                //component created
                            }
                        );
                    });
                }
            }
        </script>
    </apex:outputPanel>
    <apex:actionFunction name="addCriteriaToList" action="{!addCriteriaToList}" onComplete="instantiateCriteriaTable();" reRender="criteriaTableScript">
        <apex:param name="criteriaDataStr" value='' />
    </apex:actionFunction>
</apex:form>

There is more stuff in the form afterwards, but just wanted to show this to indicate the outputpanel and action function are at the very top level of the form, nothing is preventing their rendering or anything.

So... a user creates a criteria, saving the criteria triggers the action function, which does this in the controller:

public PageReference addCriteriaToList(){
    String criteria = ApexPages.currentPage().getParameters().get('criteriaDataStr');
    PCE_Step_Field_Dependency__c newSFD = (Criteria__c)JSON.deserialize(criteria, Type.forName('Criteria__c'));
    fieldCriteria.add(newSFD);

    return null;
}

All it does is add the new criteria to a global variable fieldCriteria then returns.

My action function is then supposed to rerender the outputPanel, so the script inside should grab the updated values of '{!fieldCriteria}', it then should call the function inside the outputPanel.

but fieldCriteria remains an empty list, all the time. It just doesn't seem to be rerendering.

I came to this solution by finding this post

But it just will not update...