[QUESTION] How to store "data-" attributes into the html tag of the component

Hi, I'm developing a plugin for charts using chart.js. In order to the generated template render the chart from a data model generated by the plugin, I need to store this model into the html tag of the component. The model used by the chart is like this:

{
    "type": "line",
    "data": {
        "labels": ["Rótulo 1", "Rótulo 2", "Rótulo 3", "Rótulo 4"],
        "datasets": [{
            "label": "Dataset 1",
            "data": [3, 9, 8, 2],
            "backgroundColor": "rgba(252,111,116, 0.7)",
            "borderColor": "rgba(35,100,224, 0.7)",
            "borderWidth": 2,
            "showLine": true,
            "pointStyle": "circle"
        }]
    }
}

And have to be stored this way:

<canvas class="gjs-chart" data-gjs-chart-model="
{
    'type': 'line',
    'data': {
        'labels': ['Rótulo 1', 'Rótulo 2', 'Rótulo 3', 'Rótulo 4'],
        'datasets': [{
            'label': 'Dataset 1',
            'data': [3, 9, 8, 2],
            'backgroundColor': 'rgba(252,111,116, 0.7)',
            'borderColor': 'rgba(35,100,224, 0.7)',
            'borderWidth': 2,
            'showLine': true,
            'pointStyle': 'circle'
        }]
    }
}">

However, I don't know how to do this. If I do:

this.model.set('data-gjs-chart-model', JSON.stringify(theChartModel));

the html attribute "data-gjs-chart-model" is not stored in the "html" section of the storage, only in the "components" section. This way, the generated chart only works on a grapesjs environment, but doesn't work if I take just the html and css of the generated template and make a page outside a grapesjs environment.