Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <template v-for="(item, index) in listaProjetosModelos">
      <tr :key="index">
          <td class="text-center">
              {{item.nome_projeto}}
          </td>
          <td class="text-center">
              {{item.departamento}}
          </td>
          <td class="text-center">
              {{item.total_tarefas}}
          </td>
          <td class="text-center text-nowrap">
              <span class="mr-2" @click="abrirModal()">Editar</span>
              <span class="mr-2" @click="abrirModal()">Excluir</span>
              <span @click="abrirModal()">Detalhes</span>
              <!--- MODAL FORM Editar ProjetoModelo -->
              <template v-if="modalOpen === true">
                  <modal name="hello-world">
                      <div class="col-md-12">
                          <h1>MODAL ABERTA</h1>
                      </div>
                  </modal>
              </template>
          </td>
      </tr>
    </template>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
#app td{
    border: 1px solid;
}

Vue

new Vue({
  el: "#app",
  data: {
  	modalOpen: false,
    listaProjetosModelos: [
      { departamento: "Contabilidade", nome_projeto: "Nome doido", total_tarefas: 0},
      { departamento: "Tecnologia", nome_projeto: "Tecnologia WOW", total_tarefas: 1},
    ]
  },
  methods: {
  	abrirModal(){
    	this.modalOpen = !this.modalOpen;
        console.log('modal')
    }
  }
})