JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://unpkg.com/vue'></script>
<script src='https://unpkg.com/vuex'></script>
<div id="app">
  <h1>Hello {{ $store.state.world }}</h1>
  <div id="get-todo" class="container">
    <input v-model='newTodo' @change="getTodo" placeholder="I need to...">
    <button @click="addTodo">Add Todo</button>
    <br/>
    <br/>
    <label> Todo desc</label>
    <textarea name="desc" id="" cols="10" rows="5" v-model='desc'></textarea>
    <br/>
    <br/>
    <select name="sel" id="sel" v-model='cat'>
      <option value="SomeCat1">SomeCat1</option>
      <option value="SomeCat2">SomeCat2</option>
    </select>
  </div>

  <h3>Current ({{todos.length}})</h3>
  <ul>
    <li v-for="todo in todos">
      {{todo.body}}
      <div>
        <button type="button" @click="edit(todo)">
          <span></span> Edit
          </button>
        <button type="button" @click="complete(todo)">Complete</button>
        <button type="button" @click="remove(todo)">Remove</button>
      </div>
    </li>
  </ul>

  <h3>Completed ({{completed.length}})</h3>
  <ul>
    <li v-for="todo in completed">
      {{todo.body}}
      <button type="button" @click="remove(todo)">Remove</button>
    </li>
  </ul>
</div>

CSS

html, body { font-size: calc(10px + .5vw) }
html  { box-sizing: border-box }
*,*:before,*:after { box-sizing: inherit }

// codepen demo only (optional) - center content
body {
  position:absolute;
  top:0;
  bottom:0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .5rem
}

JavaScript

const store = new Vuex.Store({
  state: {
    world: "Mars",
    todos: []
  },
  mutations: {
    GET_TODO(state, todo) {
      state.newTodo = todo;
    },
    ADD_TODO(state, payload) {
    debugger
      state.todos.push(key: adsf, value: {
        body: payload.newTodo,
        desc: payload.desc,
        cat: payload.cat,
        completed: payload.Completed
      });
    },
    EDIT_TODO(state, todo) {
      var todos = state.todos;
      todos.splice(todos.indexOf(todo), 1);
      state.todos = todos;
      state.newTodo = todo.body;
    },
    REMOVE_TODO(state, todo) {
      var todos = state.todos;
      todos.splice(todos.indexOf(todo), 1);
    },
    COMPLETE_TODO(state, todo) {
      todo.completed = !todo.completed;
    },
    CLEAR_TODO(state) {
      state.newTodo = "";
    }
  },
  actions: {
    getTodo({ commit }, todo) {
      commit("GET_TODO", todo);
    },
    addTodo({ commit }, payload) {
      commit("ADD_TODO", payload);
    },
    editTodo({ commit }, todo) {
      commit("EDIT_TODO", todo);
    },
    removeTodo({ commit }, todo) {
      commit("REMOVE_TODO", todo);
    },
    completeTodo({ commit }, todo) {
      commit("COMPLETE_TODO", todo);
    },
    clearTodo({ commit }) {
      commit("CLEAR_TODO");
    }
  },
  getters: {
    newTodo: state => state.newTodo,
    todos: state =>
      state.todos.filter(todo => {
        return !todo.completed;
      }),
    completedTodos: state =>
      state.todos.filter(todo => {
        return todo.completed;
      })
  }
});

new Vue({
  el: "#app",
  store,
  data: {
  	newTodo: '',
    cat: '',
    desc: ''
  },
  methods: {
    getTodo(e) {
      this.$store.dispatch("getTodo", e.target.value);
    },
    addTodo() {
    debugger
      this.$store.dispatch("addTodo", 
      {
      newTodo: this.newTodo,
      desc: this.desc,
      cat: this.cat,
      completed: false
      });
      this.$store.dispatch("clearTodo");
    },
    edit(todo) {
      this.$store.dispatch("editTodo",...