title: Why index-of not working correctly in vuejs?
body: <p>I make a custom component in Vue.js .In My component, I have a list which has a delete button.On click of a button, it deletes the row.If I click any row it deletes the last row because the index is always <code>-1</code> why?
  here is my code
  <a href="https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview</a></p>
  
  <pre><code> methods: {
          deleteTodo:function (item) {
              console.log(item)
              var index = this.items.indexOf(item);
              this.items.splice(index, 1);
          }
      }
  </code></pre>
  
  <p>below Whole code </p>
  
  <pre><code>var MyComponent = Vue.extend({
      template:'#todo-template',
      props:['items'],
      computed: {
          upperCase: function () {
              return this.items.map(function (item) {
                  return {name: item.name.toUpperCase(),complete:item.complete};
              })
          }
      },
      methods: {
          deleteTodo:function (item) {
              console.log(item)
              var index = this.items.indexOf(item);
              this.items.splice(index, 1);
          }
      }
  })
  Vue.component('my-component', MyComponent)
  
  var app = new Vue({
      el: '#App',
      data: {
          message: '',
          items: [{
              name: "test1",
              complete:true
          }, {
              name: "test2",
              complete:true
          }, {
              name: "test3",
              complete:true
          }]
      },
      methods: {
          addTodo: function () {
             this.items.push({
                 name:this.message,
                 complete:true
             });
             this.message ='';
          },
      },
      computed: {
          totalCount:function () {
              return this.items.length;
          }
      }
  });
  </code></pre>