Why is vuexfire not updating state but updating the ui correctly?

I'm trying to set up vuexfire with firestore for a project, I think I've done everything according to the docs. I managed to get data from firestore inside a component using vuex/vuexfire and show it correctly in the UI but when inspecting the state in the devtools I get that my state hasn't changed.

I used the vue-cli to set up my project and followed the vuexfire docs and examples for a basic todo app.

Here's my store file:

import Vue from 'vue'
import Vuex from 'vuex'
import { vuexfireMutations, firestoreAction } from 'vuexfire'
import { db } from './db'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    bindTodos: firestoreAction(({ bindFirestoreRef }) => {
      return bindFirestoreRef('todos', db.collection('todos'))
    }),
    unbindTodos: firestoreAction(({ unbindFirestoreRef }) => {
      unbindFirestoreRef('todos')
    })
  }
})

And here's the basic component that loads and displays the ui:

<template>
  <div>
    <h1>Home</h1>
    <p v-for="todo in todos" :key="todo.id">{{ todo.name }}</p>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Home',
  computed: { ...mapState(['todos']) },
  methods: { ...mapActions(['bindTodos']) },
  created: function () {
    this.bindTodos()
  }
}
</script>

As you can see the UI is showing the todos but state is not:

I've tried refreshing the state in the devtools but it isn't working. Any help will be much appreciated!

It turns out that it was a problem with the vue dev tools for chrome, I finally decided to uninstall it and reinstall it and it did the trick. State was actually updating, but the dev tools wasn’t showing it.

Hope this helps someone in the future!