BUG: View does not update when DataSource record change

[ilomon10]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Zen Browser (Firefox) 1.21.4b (64-bit)

Reproducible demo link

not yet

Describe the bug

How to reproduce the bug?

1. Im using grapesjs and @grapesjs/react
2. Then i tried this example https://github.com/GrapesJS/grapesjs/blob/dev/docs/modules/DataSources.md

Is there any example to use DataSource practically? like to manipulate styles, trait, and value dynamic based on DataSource?

What is the expected behavior?
View is updated

What is the current behavior?
Not updated

If is necessary to execute some code in order to reproduce the bug, paste it here below:

<GjsEditor
        grapesjs={grapesjs}
        grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
        options={options}
        plugins={gjsPlugins}
        onEditor={(editor) => {
          console.log("OK");

          const datasource = {
            id: "my-datasource",
            records: [{ id: "id1", counter: 0 }],
          };

          editor.DataSources.add(datasource);

          editor.addComponents([
            {
              tagName: "span",
              type: "text",
              components: [
                {
                  type: "data-variable",
                  defaultValue: "default",
                  path: "my-datasource.id1.counter",
                },
              ],
            },
          ]);

          const ds = editor.DataSources.get("my-datasource");
          setInterval(() => {
            const counterRecord = ds.getRecord("id1");
            if (!counterRecord) return;
            console.log("Incrementing counter", counterRecord.get("counter"));
            counterRecord.set({ counter: counterRecord.get("counter") + 1 });
          }, 1000);

          console.log("Added");
        }}
      >
        {props.children}
      </GjsEditor>

Code of Conduct

• I agree to follow this project's Code of Conduct

[Gxrvish]

@ilomon10

Can you please try code mentioned below?

editor.addComponents([
  {
    tagName: 'span',
    type: 'text',
    components: [
      {
        type: 'data-variable',
        dataResolver: {
          defaultValue: 'default',
          path: 'my-datasource.id1.counter',
        },
      },
    ],
  },
]);

Docs are stale, Still showing the old way. Technique is actually changed after this PR.

[Gxrvish]

#6787

I opened a PR for that doc update, Feel free to check!!