Updating x-data with Alpine.js in JavaScript's init function

Alpine.js: How do we update an x-data="{ ShowReport: false }" in an init function of Javascript?

I'm trying to open a <div> once a file already executed(which is now good) but the ShowReport didn't change to "true"

Trying to update the ShowReport to "true" Please see the attached code:

div class="mt-2" x-data="{ ShowReport: false }">
            <button class="dui-btn dui-btn-neutral" x-on:click="ShowReport = ! ShowReport">Show Report</button>
            <div x-show="ShowReport">
                <div class="p-4">
                    <div id="csv-response"></div>
                </div>
            </div>
        </div>

 <script>
        document.addEventListener("DOMContentLoaded", () => {
            const csvUploadDropzone = new common.Dropzone("#csv-upload-dropzone", {
                dictDefaultMessage: "Drag and drop your csv here",
                url: "{% url 'buyer:csv-upload' buyer.id %}",
                acceptedFiles: '.csv',
                uploadMultiple: false, // POST a single document at a time (on server URL ``url``)
                autoProcessQueue: true, // true will trigger automatic uploading/processing of the dropped resume
                maxFiles: 1, // a maximum of a single CV
                dictMaxFilesExceeded: "You may only upload a single csv document!",
                maxFilesize: 10, // in MB
                addRemoveLinks: true,
                dictRemoveFile: "Remove",

                init: function () {
                    this.on("success", function (file, response) {
                        // Updates the "hidden" csv with whatever the server sent back to us...
                        document.getElementById('csv_filename').value = response['csv_filename'];
                        document.getElementById("csv-response").innerHTML = response;
                        this.ShowReport = true
                    });
                },

                //success: function(file, response) {
                    // Updates the "hidden" csv with whatever the server sent back to us...
                    //document.getElementById('csv_filename').value = response['request_file'];
                    //console.log(file)
                //},

                removedfile: function(file) {
                    // Update our hidden filename; then call the "default" behaviour as per docs...
                    document.getElementById('csv_filename').value = null;

                    if (file.previewElement != null && file.previewElement.parentNode != null) {
                        file.previewElement.parentNode.removeChild(file.previewElement);
                    }
                    return this._updateMaxFilesReachedClass();
                },

                maxfilesexceeded: function(file) {
                    alert("You may only upload a single csv document!");
                    this.removeFile(file);
                },

            });
        });
        
    </script>

You could consider using a store like:

<div class="mt-2" x-data>
  <button
    class="dui-btn dui-btn-neutral"
    x-on:click="$store.myStore.toggle()"
  >
    Show Report
  </button>
  <div x-show="$store.myStore.showReport">
    <div class="p-4">
      <div id="csv-response"></div>

Alpine.store('myStore', {
    showReport: false,
    toggle() {
        this.showReport = !this.showReport;
    },
});

document.addEventListener("DOMContentLoaded", () => {
  // …
  init: function () {
    this.on("success", function (file, response) {
      // …
      Alpine.store('myStore').showReport = true;
    });
  },
  // …
});

Or you could define the data in the script:

<div class="mt-2" x-data="myData">

Alpine.data('myData', {
  ShowReport: false,
  init() {
    const myData = this;
    document.addEventListener("DOMContentLoaded", () => {
      // …
      init: function () {
        this.on("success", function (file, response) {
          // …
          myData.ShowReport = true;
        });
      },
      // …
    });
  },
});

</details>