vue

<template>
  <div class="container" id="app">

    <div class="row justify-content-md-center">
      <div class="col-md-5 col-12 ">

    <Formulario @cadastrar="cadastro" titulo="Cadastro de tarefas">
      <template v-slot:header>
        <h1>Cadastro de tarefas 2</h1>
        <h6>Digite o nome da tarefa</h6>
      </template>

      <template v-slot:footer>
        <hr />
      </template>
    </Formulario>

      </div>
    </div>

    <div class="row mt-5">
        <div class="col-12">
          <Listagem titulo="Lista de Tarefas" v-bind:lista="tarefas" @destruir="excluirTarefa" @concluido="concluido"></Listagem>
        </div>
    </div>

  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
import Formulario from './components/Formulario.vue'
import Listagem from './components/Listagem.vue'
import axios from 'axios';

export default {
  name: 'app',
  components: {
    Formulario,
    Listagem
  },
  data: function() {
    return {
      tarefas: []
    };
  },
  created: function() {
    this.atualizarLista();
  },
  methods: {
    cadastro: function(paramTarefa) {
      //this.tarefas.push({ tarefa: paramTarefa,
      //  isConcluido: false });

      var _this = this;
      axios.put('http://eyglys.com.br/apitodo/todo/create',{
        todo: paramTarefa
      }).then(function(resposta) {
        _this.atualizarLista();
      });

      // console.log(this.tarefas);
    },
    excluirTarefa: function(index) {
      //this.tarefas.splice(index,1);
      var _this = this;
      axios.delete('http://eyglys.com.br/apitodo/todo/delete?id='+index).then(function(resposta) {
        _this.atualizarLista();
       });
    },

    atualizarLista: function() {
      var _this = this;
      axios.get('http://eyglys.com.br/apitodo/todo?per-page=100').then(function(resposta) {
        _this.tarefas = resposta.data.map(function(obj) {
            return { tarefa: obj.todo, isConcluido: obj.finished, id: obj.id };
         });
       });
    },

    concluido: function(obj) {
      var _this = this;
      axios.put('http://eyglys.com.br/apitodo/todo/update?id='+obj.id,
      {
        finished: obj.isConcluido
      }).then(function(response) {
        //console.log(response);
        _this.atualizarLista();
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>