Buttons generated via JavaScript do not call functions in VueJS

I've made a function that generates buttons for every item in a list, and every button when clicked should run a function in the App.vue file.

The problem is that the onclick and the v-on:click methods do not work.

This is the code:

    await resetView();
    // document.getElementById("projSelLb").style.display = "none";
    var projects = await detaStorage.getAllProjects();
    var parentDiv = document.getElementById('projectsDetaDiv');
    projects.forEach(function(item) {
      var div = document.createElement('div');
      div.innerHTML = `<button type="button" class="btn btn-primary" style="margin-top: 12px;" @click.native="loadFromDeta(String(item))">${item}</button>`;
      parentDiv.appendChild(div);
    });
    // document.getElementById("projSelLb").style.display = "block";
    document.getElementById("spinnerGetProj").style.display = "none";

  async function resetView() {
    // document.getElementById("projSelLb").style.display = "none";
    document.getElementById("spinnerGetProj").style.display = "block";
    document.getElementById('projectsDetaDiv').innerHTML = null;
  }

function loadFromDeta(name) {
  workspaceClear();
  var data = detaStorage.getProjectData();
  Blockly.Xml.domToWorkspace(data.xml, foo.value.workspace);
}

Oh, if you really want to create the elements manually in Vue, you need to use the render() function. However, while there are practical applications for it, I am pretty sure it would serve you better to write your example in the regular Vue style, where you separate between template and data operations, as it gives you cleaner code that is easier to maintain.

In the template, you can express the exact same DOM operations you did above, using v-if to show and hide the loading spinner and using v-for to create the buttons from the list:

<div v-if="loading" id="spinnerGetProj"/>
<div v-else v-for="item in projects" :key="item">
  <button
    type="button"
    class="btn btn-primary mt-4"
    @click="loadFromDeta(item)"
  >{ item }</button>
</div>

You didn't say which Vue version you are using, but in Vue 3 composition api, the corresponding script part would look something like this:

const projects = ref([])
const loading = ref(true)

const loadProjects = async() => {
  loading.value = true
  projects.value = await detaStorage.getAllProjects()
  loading.value = false
}

And that's it. Now you just have to call loadProjects(), and everything else falls into place. Hope that helps.