I use vuejs to render a list and give each item the correct key. Normally, I delete the first item of the array, and all the sub-items in the list will not be updated.

But I found that when adding a v-bind="$attrs" to the sub-items, when I delete any item, all the sub-items will be updated!

Normal code:

new Vue({
        el: "#app",
        components: {
          Item: {
            props: {
              item: Number
            },
            template: `<input :placeholder="item"></input>`,
            beforeUpdate() {
              console.log('Item beforeUpdate')
            },
            updated() {
              console.log('Item updated')
            }
          }
        },
        data() {
          return {
            list: [1, 2, 3]
          };
        },
        template: `
          <div>
            <button @click="list.splice(0, 1)">splice first</button>
            <item v-for="item in list" :key="item" :item="item" />
          </div>
        `
      });

When the above code is running, i click button, will not print anything. Explain that the sub-items component is not updated.

When i modify the component's template as:

<input :placeholder="item" v-bind="$attrs"></input>

and click button, will print 'Item beforeUpdate' and 'Item updated', this is incorrect in my cognition!

Hope someone who knows this can help me, thank you!