After adding 1 item to TODO app fails when I just type on text field, How to fix it?

Question

this might be stupitest question to ask but I just can't understand why this is happening , I am trying to Build simple TODO app with Nuxt Js with Vuex, When I add one Item it works fine and displays, after that if I just type something on text field app failds and gives error "Error: [vuex] do not mutate vuex store state outside mutation handlers."

Here is index.vue file

<template>
  <v-main>
    <v-row justify="center" class="py-10">
      <h1 class="teal--text">NUXT TODO APP</h1>
      <v-col cols="12" md="10">
        <v-text-field type="text" outlined v-model="item.text"> </v-text-field>
        <v-btn color="teal" x-large class="mt-3" @click="addItem">Add</v-btn>
      </v-col>

      <v-col cols="8">
        <h1 v-if="items.length <= 0">No Data Found</h1>
        <v-list v-else>
          <v-list-item v-for="item in items" :key="item.id" class="my-5">
            <v-list-item-content>
              <v-list-item-title>{{ item.text }}</v-list-item-title>
            </v-list-item-content>
            <v-list-item-action class="d-flex flex-row">
              <v-btn color="teal"> Edit </v-btn>
              <v-btn color="error" class="mx-5"> Delete </v-btn>
            </v-list-item-action>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
  </v-main>
</template>

<script>
export default {
  computed: {
    items() {
      return this.$store.state.items;
    },
  },
  data: () => ({
    item: {
      text: "",
    },
  }),
  methods: {
    addItem() {
      this.$store.commit("addItem", this.item);
    },
  },
};
</script>

And here is index.js file for Vuex

export const state = () => ({
  items: [],
});

export const mutations = {
  addItem(state, payload) {
    state.items.push(payload);
  },
};

please guide me what the hell I am missing here.

Thank You.