HTML5 data attribute as JSON data in fluid contentelement

test.html

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
     xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">

<f:layout name="Content"/>

    <f:section name="Configuration">
        <flux:form id="foo" label="bar" description="Lorem" options="{useTypoScript: 0, group: 'Foo', Fluidcontent: {sorting: 400}, icon: '{f:uri.resource(path: \'Icons/foo.png\')}'}">
      
        <flux:form.section name="bar">
            <flux:field.select name="individualFoo" items="default" default="default" label="bar"/>
        </flux:form.section>
        </flux:form>
    </f:section>
    
    
    <f:section name="Preview">
        <flux:widget.grid/>
    </f:section>
    
    
    <f:section name="Main">
        <v:asset name="foo{record.uid}" dependencies="jquery" debug="0" fluid="TRUE">
            <script>console.log($('#s{record.uid}').data('test').myVarName)</script>
        </v:asset>
        
        <v:variable.set value="{myVarName:individualFoo}" name="iFoo"/>
        
        <div id="s{record.uid}" data-test='{iFoo  -> v:format.json.encode()}'></div>
        
    </f:section>
</div>