VuexFire Todo App Demo (source: https://jsfiddle.net/973dLvsy/)

fiddle.html

<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vuexfire"></script>

<div id="app">
  <input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
  <ul>
    <li v-for="todo in todos">
      <input :value="todo.text" @input="updateTodoText(todo, $event.target.value)">
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</div>

fiddle.js

var db = firebase.initializeApp({
  databaseURL: 'https://vuefiredemo.firebaseio.com'
}).database()
var todosRef = db.ref('todos')

var store = new Vuex.Store({
  // VuexFire will check the type of the property to bind as an array or as
  // an object
  strict: true,
  state: {
    todos: []
  },
  mutations: VuexFire.firebaseMutations,
  getters: {
    todos: state => state.todos,
  },
  actions: {
    setTodosRef: VuexFire.firebaseAction(({
      bindFirebaseRef
    }, ref) => {
      bindFirebaseRef('todos', ref)
    }),
  },
})

new Vue({
  el: '#app',
  store,
  computed: Vuex.mapGetters(['todos']),
  data: {
    newTodoText: '',
  },

  methods: {
    // Database manipulation are done directly here for the sake of simplicity, but it makes more sense to use actions instead
    removeTodo: function(todo) {
      todosRef.child(todo['.key']).remove()
    },
    addTodo: function() {
      if (this.newTodoText.trim()) {
        todosRef.push({
          text: this.newTodoText,
        })
        this.newTodoText = ''
      }
    },
    updateTodoText: function (todo, newText) {
      todosRef.child(todo['.key']).child('text').set(newText)
    },
  },

  created() {
    this.$store.dispatch('setTodosRef', todosRef)
  },
})