[QUESTION] How to have a dynamic properties in a custom block?

Hello, I am making a custom category using ChartJS which would be blocks of draggable charts. I currently have this code to have a static chart rendered in the canvas after dropping

blockManager.add('test-chart-block', {
        label: `<div>
                  <img src="dist/img/bar-chart.png" height="60px" width="60px">
                  <div class="my-label-block">Test Chart Block</div>
                </div>`,
        category: 'Charts',
        attributes: {},
        content: {
          content: `<canvas id="bar-chart"></canvas>`,
          script: function () {
            var ctx = document.getElementById("bar-chart");
            
            new Chart(ctx, {
                type: 'bar',
                data: {
                  labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
                  datasets: [
                    {
                      label: "Population (millions)",
                      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
                      data: [2478,5267,734,784,433]
                    }
                  ]
                },
                options: {
                  legend: { display: false },
                  title: {
                    display: true,
                    text: 'Predicted world population (millions) in 2050'
                  }
                }
            });
          },
          style: {
            height: '350px',
            width:'500px'
          }
          
        }
      });

Now my problem is after dragging it I cannot update/edit the chart's data. How can I make it so that the data, options properties of the Chart is editable?

Thank you.