title: My modal into electron dont open when i click into the button
body: <p>I expected that by clicking on the Editar button, within #app, the modal would open, but it does not open at all !. I dont know if my js logic are wrong or my html are wrong!</p>
  
  <p>When i try to use some function for the Modal, they continue dont work.
  What i need to do for solved this?</p>
  
  <p>JavaScript code are in final</p>
  
  <p>full HTML:
  <a href="https://pastebin.com/9GGbQ7WS" rel="nofollow noreferrer">https://pastebin.com/9GGbQ7WS</a></p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;directories&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;!-- Stylesheets --&gt;
          &lt;link rel="stylesheet" href="css/photon.css"&gt;
          &lt;link rel="stylesheet" href="css/style.css"/&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
          &lt;!-- Font Awesome --&gt;
          &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"&gt;
  
          &lt;!-- HTML5Shiv --&gt;
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
          &lt;!-- Estilo customizado 
          &lt;link rel="stylesheet" type="text/css" href="css/estilo.css"&gt;--&gt;
          &lt;!-- Electron Javascript --&gt;
  
        &lt;/head&gt;
  
        &lt;body&gt;
         &lt;div class="window"&gt;
           &lt;header class="toolbar toolbar-header"&gt;
            &lt;h1 class="title"&gt;&lt;/h1&gt;
             &lt;div class="toolbar-actions"&gt;
          &lt;div class="btn-group"&gt;
            &lt;button class="btn btn-default"&gt;
              &lt;span class="icon icon-home"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button class="btn btn-default"&gt;
              &lt;span class="icon icon-folder"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button class="btn btn-default active"&gt;
              &lt;span class="icon icon-cloud"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button class="btn btn-default"&gt;
              &lt;span class="icon icon-popup"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;button class="btn btn-default"&gt;
              &lt;span class="icon icon-shuffle"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;button class="btn btn-default"&gt;
            &lt;span class="icon icon-home icon-text"&gt;&lt;/span&gt;
            Filters
          &lt;/button&gt;
  
          &lt;button class="btn btn-default btn-dropdown pull-right"&gt;
            &lt;span class="icon icon-megaphone"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
           &lt;/header&gt;
        &lt;div class="window-content"&gt;
          &lt;div class="pane-group"&gt;
            &lt;div class="pane-sm sidebar"&gt;...&lt;/div&gt;
            &lt;div class="pane"&gt;
               &lt;h2 class="col-md-12 text-center"&gt;
      Creates a table to show customer data whit these infos:&lt;/h2&gt; 
              &lt;table class="table table-striped"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;nome&lt;/th&gt;
                &lt;th&gt;cpf&lt;/th&gt;
                &lt;th&gt;endereco&lt;/th&gt;
                &lt;th&gt;telefone&lt;/th&gt;
                &lt;th&gt;placa do carro&lt;/th&gt;
                &lt;th&gt;compania&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
  
  
  
            &lt;tbody&gt;
              &lt;tr id="app"&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.nome}}
                &lt;/td&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.cpf}}
                &lt;/td&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.endereco}}
                &lt;/td&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.telefone}}
                &lt;/td&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.placa}}
                &lt;/td&gt;
                &lt;td v-for = "cliente in clientes"&gt;
                {{cliente.compania}}
                &lt;/td&gt;
  
          *********HERE IS THE BUTTON. IDONT KNOW THE ERROR*************
                &lt;td&gt;
                  &lt;button type="button" class="btn btn-negative" @click="editClient" &gt;Editar&lt;/button&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;footer class="toolbar toolbar-footer"&gt;
  
  *****************The modal that does not open when clicking into the button**************
  
          &lt;h1 class="title"&gt;Modal&lt;/h1&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
  
          &lt;div id="modal-template" class="modal"&gt;
                &lt;div class="wrap"&gt;
                   &lt;form action="" class="col-md-12 pane-body" id="cadastro-cliente"&gt;
              &lt;div class="container row  justify-content-center"&gt;
                &lt;div class="row justify-content-center"&gt;
                  &lt;h2 class="col-md-12 text-center"&gt;Cadastro do cliente&lt;/h2&gt; 
                &lt;div class="form-group col-md-12 justify-content-center"&gt;
                  &lt;label for="nome"&gt;Nome Completo&lt;/label&gt;
                  &lt;input type="text" class="form-control" name="name" id="nome" v-model="client nome" placeholder="Nome Completo"&gt;
                    &lt;/div&gt;
              &lt;div class="form-group col-md-6"&gt;
                &lt;label for="cpf"&gt;CPF&lt;/label&gt;
                &lt;input type="text" class="form-control" name="cpf" id="cpf" v-model="client cpf" placeholder="CPF com 9 digitos"&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-6"&gt;
               &lt;label for="endereco"&gt;Endereço&lt;/label&gt;
               &lt;input type="text" class="form-control" name="endereco" v-model="client endereco" id="endereco" placeholder="ex: Rua Professor araujo, 12345"&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-6"&gt;
                &lt;label for="telefone"&gt;Telefone&lt;/label&gt;
                &lt;input type="text" class="form-control" name="telefone" id="telefone" v-model="client telefone" placeholder="ex: 539822232512"&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-6"&gt;
                &lt;label for="placa"&gt;Placa do carro&lt;/label&gt;
                &lt;input type="placa" class="form-control" name="placa" id="placa" v-model="client placa" placeholder="ex: asd-1234"&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-6"&gt;
                &lt;label for="compania"&gt;Compania&lt;/label&gt;
                &lt;input type="text" class="form-control" name="compania" id="compania" v-model="client compania" placeholder="ex: asd-1234"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="justify-content-center pb-5"&gt;
                &lt;button type="button" id="salvar" class="btn btn-primary"&gt;Salvar&lt;/button&gt;
                 &lt;button type="button" class="btn btn-negative" @click="showModal=false"&gt;Fechar&lt;/button&gt;
                &lt;!--&lt;button type="button" class="btn btn-negative" @click="showModal=false"&gt;Fechar&lt;/button&gt;--&gt;
              &lt;/div&gt; 
              &lt;/div&gt;
            &lt;/form&gt;
                &lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
  
  
  ***************JAVASCRIPT CODE*************
            &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;
          &lt;script &gt;
          var read = require('read-file-utf8')
          var loki = require('lokijs');
          var db = new loki('db.json');
          var data = read(__dirname+'/loki.json');
          db.loadJSON(data);
          window.vue = require('vue');
          var clientes = db.getCollection('clientes');
          console.log(db);
  
          //inicio inicialização modal
          Vue.component('modal', {
          template: '#modal-template'
          })// fim inicializção modal
  
          new Vue({
            el: '#app',
            data: {
              clientes: [],
              showModal: false
            },
            mounted: function(){
              this.clientes = clientes.data;
              console.log(this.clientes);
            },
            methods:{
              editClient:function(){
                showModal: true
              }
            }
          })
          &lt;/script&gt;
  </code></pre>