[Vuejs]-How do you target a button, which is in another component, with a method in App.vue?

You can send an event to your parent notifying the parent that the delete button is clicked in your child component.

You can check more of this in Vue’s documentation.

And here’s how your components should look like:

TodoCard.vue:

<template>
  <div id="todo">
    <h3>{{ todo.text }}</h3>
    <button @click="removeTodo">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    removeTodo: function (todo) {
       this.$emit('remove')
    }
  }
}
</script>

App.vue:

<template>
  <div id="app">
    <input class="new-todo"
    placeholder="Enter a task and press enter."
    v-model="newTodo"
    @keyup.enter="addTodo">
    <TodoCard v-for="(todo, key) in todos" :todo="todo" :key="key" @remove="removeTodo(key)" />
  </div>
</template>

<script>
import TodoCard from './components/TodoCard'

export default {
  data () {
    return {
      todos: [],
      newTodo: ''
    }
  },
  components: {
    TodoCard
  },
  methods: {
    addTodo: function () {
      // Store the input value in a variable
      let inputValue = this.newTodo && this.newTodo.trim()

      // Check to see if inputed value was entered
      if (!inputValue) {
        return
      }

      // Add the new task to the todos array
      this.todos.push(
        {
          text: inputValue,
          done: false
        }
      )

      // Set input field to empty
      this.newTodo = ''
        }
      },
     removeTodo: function(key) {

       this.todos.splice(key, 1);

     }
    }
    </script>