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')">Editar</span>
              <span class="mr-2" @click="abrirModal('Excluir')">Excluir</span>
              <span @click="abrirModal('Detalhes')">Detalhes</span>
              <!--- MODAL FORM Editar ProjetoModelo -->
          </td>
      </tr>
    </template>
    <template v-if="modalOpen === true">
                  <div class="modal">
                      <div class="col-md-12">
                          <h1>{{ dadosModal }}</h1>
                      </div>
                  </div>
              </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;
}
.modal{
    position:absolute;
    left: 30%;
    background: #fff;
    padding:1em
}

Vue

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