title: Vue add movies to favourites
body: <p>I have a home page where I have 3 movies(passed from store) each of these movies has an add to fav page button. So what I want to do is when I click on the add movie to fav button and I go to my fav page the movie should be there. I am new to Vue so sorry if my code is not the best. even document recommendations would be appreciated!</p>
  <p>home page:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
   &lt;v-container&gt;
     &lt;v-layout row wrap&gt;
       &lt;v-flex lg4
     v-for=&quot;item in items&quot; :key=&quot;item.id&quot;
       &gt;
         &lt;v-card
           
      
      class=&quot;mx-auto my-12&quot;
      max-width=&quot;374&quot;
    &gt;
      &lt;template slot=&quot;progress&quot;&gt;
        &lt;v-progress-linear
          color=&quot;deep-purple&quot;
          height=&quot;10&quot;
          indeterminate
        &gt;&lt;/v-progress-linear&gt;
      &lt;/template&gt;
  
      &lt;v-img
        height=&quot;250&quot;
        :src=&quot;item.image&quot;
      &gt;&lt;/v-img&gt;
  
      &lt;v-card-title&gt;{{item.title}}&lt;/v-card-title&gt;
  
      &lt;v-card-text&gt;
        &lt;v-row
          align=&quot;center&quot;
          class=&quot;mx-0&quot;
        &gt;
          &lt;v-rating
            :value=&quot;4.5&quot;
            color=&quot;amber&quot;
            dense
            half-increments
            readonly
            size=&quot;14&quot;
          &gt;&lt;/v-rating&gt;
  
        &lt;/v-row&gt;
      &lt;/v-card-text&gt;
  
      &lt;v-divider class=&quot;mx-4&quot;&gt;&lt;/v-divider&gt;
  
      &lt;v-card-title&gt;Description&lt;/v-card-title&gt;
  
      &lt;v-card-text&gt;
       {{item.decsription}}
      &lt;/v-card-text&gt;
  
      &lt;v-card-actions&gt;
        &lt;v-btn class=&quot;ml-2&quot;
          color=&quot;deep-purple lighten-2&quot;
          text
          @click=&quot;favs(item.id)&quot;
        &gt;
         Add to Favs
        &lt;/v-btn&gt;
         &lt;v-btn class=&quot;ml-auto&quot;
          color=&quot;deep-purple lighten-2&quot;
          text
          @click=&quot;later(item.id)&quot;
        &gt;
         Add to Watch Later
        &lt;/v-btn&gt;
      &lt;/v-card-actions&gt;
    &lt;/v-card&gt;
    
       &lt;/v-flex&gt;
      
      
       
     &lt;/v-layout&gt;
   &lt;/v-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      data () {
        return {
       
  
     
        }
      },
      methods: {
         favs(){
         this.$router.push({
            path: '/fav'
          })
         }
      },
      computed:{
        items(){
          return this.$store.state.items;
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>fav page:</p>
  <pre><code>template&gt;
    &lt;div&gt;
   &lt;v-container&gt;
     &lt;v-layout row wrap&gt;
       &lt;v-flex lg4
     v-for=&quot;item in items&quot; :key=&quot;item.id&quot;
       &gt;
         &lt;v-card
           
      :loading=&quot;loading&quot;
      class=&quot;mx-auto my-12&quot;
      max-width=&quot;374&quot;
    &gt;
      &lt;template slot=&quot;progress&quot;&gt;
        &lt;v-progress-linear
          color=&quot;deep-purple&quot;
          height=&quot;10&quot;
          indeterminate
        &gt;&lt;/v-progress-linear&gt;
      &lt;/template&gt;
  
      &lt;v-img
        height=&quot;250&quot;
        :src=&quot;item.image&quot;
      &gt;&lt;/v-img&gt;
  
      &lt;v-card-title&gt;{{item.title}}&lt;/v-card-title&gt;
  
      &lt;v-card-text&gt;
        &lt;v-row
          align=&quot;center&quot;
          class=&quot;mx-0&quot;
        &gt;
          &lt;v-rating
            :value=&quot;4.5&quot;
            color=&quot;amber&quot;
            dense
            half-increments
            readonly
            size=&quot;14&quot;
          &gt;&lt;/v-rating&gt;
  
        &lt;/v-row&gt;
      &lt;/v-card-text&gt;
  
      &lt;v-divider class=&quot;mx-4&quot;&gt;&lt;/v-divider&gt;
  
      &lt;v-card-title&gt;Description&lt;/v-card-title&gt;
  
      &lt;v-card-text&gt;
       {{item.decsription}}
      &lt;/v-card-text&gt;
  
      &lt;v-card-actions&gt;
        &lt;v-btn class=&quot;ml-2&quot;
          color=&quot;deep-purple lighten-2&quot;
          text
          @click=&quot;favs&quot;
        &gt;
         Add to Favs
        &lt;/v-btn&gt;
         &lt;v-btn class=&quot;ml-auto&quot;
          color=&quot;deep-purple lighten-2&quot;
          text
          @click=&quot;later&quot;
        &gt;
         Add to Watch Later
        &lt;/v-btn&gt;
      &lt;/v-card-actions&gt;
    &lt;/v-card&gt;
    
       &lt;/v-flex&gt;
      
      
       
     &lt;/v-layout&gt;
   &lt;/v-container&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
      data(){
          return {
              
          }
      },
      computed : {
          fav(){
              let check= this.$store.getters.item.filter(f=&gt;{
          return f.id == item.id
        })
        return check
        }
          }
      
  }
  &lt;/script&gt;
  </code></pre>
  <p>store:</p>
  <pre><code> state: {
      items: [
        {id: 1,
        title:'Free guy',  
        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.'},  
      
      {id: 2,
        title:'true story',  
        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.'},  
      
      {id: 3,
        title:'starwars',  
        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.'},  
      
      ]
   
    },
    getters :{
     items(s) {
       return s.items
     }
    },
  
  </code></pre>