куда добавить надо стили не пойму

import Vue from 'vue'
window.app = new Vue({
  el: "#app",

  data() {
    return {
      innerData: {
        todos: [],
        activeFilter: "all"
      },
      value: "",
      id: 1
    };
  },
  template: `
    <div>
        <input v-model="value" id="search" />
        <button v-on:click="todo()">Добавить задачу</button>

        <div>
        <span v-on:click="setFilter('active')">Активные</span>
        <span v-on:click="setFilter('all')">Все</span>
        <span v-on:click="setFilter('completed')">Завершенные</span>
        </div>

  
        <div v-if="innerData.activeFilter == 'active'">
          <div v-for="todo in innerData.todos" v-if="todo.completed != true">
            <input type="checkbox">
            <span>{{ todo.name }}</span>
            <button v-on:click="remove(todo)">delet</button>
          </div>
        </div>

        <div v-if="innerData.activeFilter == 'all'">
          <div v-for="todo in innerData.todos">
            <input type="checkbox">
            <span>{{ todo.name }}</span>
            <button v-on:click="remove(todo)">delet</button>
          </div>
        </div>

        <div v-if="innerData.activeFilter == 'completed'">
          <div v-for="todo in innerData.todos" v-if="todo.completed == true">
            <input type="checkbox">
            <span>{{ todo.name }}</span>
            <button v-on:click="remove(todo)">delet</button>
          </div>
        </div>
    </div>
  `,

  methods: {
    todo() {
      if(this.value.trim()) {
          const todoItem = {
          id: this.id,
          name: this.value,
          completed: false
        }

        this.innerData.todos.push(todoItem)
        this.value = ''
        this.id += 1
      }
    },

    remove(t) {
      const {todos} = this.innerData
      const newtodos = todos.filter(elem => elem.id !== t.id)
      this.$set(this.innerData, "todos", newtodos);
    },

    setFilter(filter) {
      this.$set(this.innerData, "activeFilter", filter);
    }
  },

});