Reactive Todo List

Create a todo list application demonstrating how adding or removing items from a reactive array triggers updates to the template.
<div id="app">
  <input type="text" v-model="newTodo" @keyup.enter="addTodo">
  <button @click="addTodo">Add</button>
    <li v-for="todo in todos" :key="">
      {{ todo.text }}
      <button @click="removeTodo(">Remove</button>

<script src=""></script>
HTML structure with Vue.js CDN included for reactivity. Contains an input box for new todos, a button to add todos, and a list to display todos with a remove button for each.
  #app {
    margin: auto;
    width: 50%;
    padding: 10px;
  ul {
    list-style: none;
    padding: 0;
  li {
    margin-bottom: 10px;
Basic CSS for styling the todo list application.
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: []
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return;
        text: this.newTodo
      this.newTodo = '';
    removeTodo(id) {
      this.todos = this.todos.filter(todo => !== id);
Vue.js instance to make the app reactive. Implements methods to add and remove todos, and binds them to the respective events in the markup.