Bug ao excluir tarefas | Vue3: avançando no framework | Alura

Salve, Samuel!

Primeiramente, fica aqui o elogio pra esse visual bacana que tu implementou no seu Tracker.

O que está acontecendo é que delete é uma palavra reservada. Ela é utilizada para remover propriedades dos objetos, por isso o seu id estava sendo deletado. Se você quiser saber mais sobre o delete, dá uma olhada aqui na documentação.

Se você trocar o nome do método de delete para, por exemplo, destroy o seu método vai funcionar do jeito que você espera:

<template>
  <section>
    <router-link to="/projects/new" class="button">
      <span class="icon is-small">
        <i class="fas fa-plus"></i>
      </span>
      <span>New Project </span>
    </router-link>
    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="project in projects" :key="project.id">
          <td>{{ project.id }}</td>
          <td>{{ project.name }}</td>
          <td>
            <router-link :to="`/projects/${project.id}`" class="button">
              <span class="icon is-small">
                <i class="fas fa-pencil-alt"></i>
              </span>
            </router-link>
            <button class="button ml-2 is-danger" @click="destroy(project.id)">
              <span class="icon is-small"> <i class="fas fa-trash"></i> </span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script lang="ts">
  import { useStore } from '@/store';
  import { computed, defineComponent } from 'vue';
  import { DELETE_PROJECT } from '@/store/MutationType';
  export default defineComponent({
    name: 'List',

    methods: {
      destroy (id: string) {
        this.store.commit(DELETE_PROJECT, id);
      },
    },

    setup() {
      const store = useStore();
      return {
        projects: computed(() => store.state.projects),
        store,
      };
    },
  });
</script>