Vuex - update item

Question

i have a home page that has 3 movies(stored as an array in store called items) and I have a button where I can click for details where I want to be able to update the movie I have selected. my code works when I try to update the genre and description but when I try to update the movie title it gives errors however still updates the object. details page:

<template>
  <div>
    <v-container>
      <v-layout row wrap>
        <v-flex lg12>
          <!-- <p>title:{{ this.$route.params.title }}</p> -->

          <v-card>
            <v-card-title primary-title>
              <v-text-field
                name="name"
                label="Movie title"
                id="id"
                v-model="item.title"
              >
              </v-text-field>
              <v-text-field label="Movie genre" v-model="item.genre">
              </v-text-field>
            </v-card-title>

            <v-card-text>
              <h1>Movie Descriptions</h1>

              <v-textarea v-model="item.decsription"> </v-textarea>
            </v-card-text>
            <v-card-actions>
              <v-btn color="success" @click="update(item.title)">update</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: {
        title: "",
        decsription: "",
        genre: "",
      },
      titlee: this.$route.params.title,
    };
  },
  computed: {
    item() {
      return this.$store.state.items.find((f) => f.title === this.titlee);
    },
  },
  methods: {
    update() {
      let indexx = this.$store.state.items.findIndex(
        (f) => f.title == this.titlee
      );
      this.$store.state.items[indexx].title = this.items.title;
      this.$store.state.items[indexx].genre = this.items.genre;
      this.$store.state.items[indexx].decsription = this.items.decsription;
      this.$router.push({
        path: "/",
      });
    },
  },
};
</script>

state

state: {
    items: [
      {id: 1,
      title:'Free guy', 
      genre: 'comedy', 
      image :'Free-Guy.png',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
      fav: false,
      later: false,
    },  
    
    {id: 2,
      title:'true story',
      genre: 'romance', 
      image :'add.jpg',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
      fav: false,
      later: false,},  
    
    {id: 3,
      title:'starwars',  
      genre: 'Sci-fi', 
      image :'st.jpeg',
      decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.',
      fav: false,
      later: false,
    },

router link to details page(open) in home page

 <router-link :to="{ name : 'open' , params : {title: item.title}}" >

Answer 1

It's Working on My side But for better experience make sure you are validating the values