Sending data to javascript functions

I’m working on a new project and looking to use some different JS libraries for multi select etc. I want to be able to initialise multiple pickers from a single call.

I have it working really well using static events:

onupdated="newSlim(selects=[{id:'#selectCommunities', placeholder:'Link Communities:', data:'content.listCommunities.data.listCommunities', selected:'content.data_detailSite.data.queryCommunities.values(`id`)'},{id:'#selectResources', placeholder:'Link Resources:',data:'[]', selected:'[]'}])"

Running this function:

function newSlim(selects) {
        // console.log(selects);
        const idArray = (selects);
        idArray.forEach((select) => {
            let el = document.querySelector(select.id);
            // console.log(dmx.parse(select.data));
            new SlimSelect({
                select: select.id,
                closeOnSelect: false,
                placeholder: select.placeholder,
                data: dmx.parse(select.data),
            })
            // console.log(dmx.parse(select.selected));
            el.slim.set(dmx.parse(select.selected))
        })
    }

I would rather be app using Flows for this, not least to control timing and to be easier to manage. I can get it working via Flows for a single multiselect by setting params for each variable, but I can’t work out how to pass to flow params as an object to initialise more than one multiselect in one go. I’ve tried lots of ways of structuring the params (object with variables, arrays etc), and different syntax in dmx event but haven’t managed it yet…

I guess my question is can I, and if so how do I, pass info structured like this to a flow, for use in a JS function?

onupdated="newSlim(selects=[{id:'#selectCommunities', placeholder:'Link Communities:', data:'content.listCommunities.data.listCommunities', selected:'content.data_detailSite.data.queryCommunities.values(`id`)'},{id:'#selectResources', placeholder:'Link Resources:',data:'[]', selected:'[]'}])"