vue v-for就地複用機制導致directive自定義指令不刷新

最近發現了一個問題，自定義指令和v-for共用，v-for的數據發生變化時，自定義指令傳的參數並沒有改變，還是第一次渲染是的參數，大概是這樣的：

<template>
    <ul>
        <li v-for="item in list" v-tap="item">第{{ item }}個</li>
    </ul>
</template>
<script>
    data(){
        return{
            list:[ 1,2,3,4,5 ],
            list1:[ 'a','b','c','d' ]
        }
    },
    directives:{
        tap:{
            bind:function(el,binding){
            console.log(binding.value)
            //第一次渲染時，打印的是1，2，3，4
            //當list的值變成list1的值是，沒有重新打印 
            //也就是說，dom沒有重新渲染，指令裏接收的值還是1，2，3，4
            }
        }
    }
</script>

爲什麼dom沒有重新渲染呢，這源於v-for的就地複用機制
官方的解釋是：
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by=”$index” 。

這個默認的模式是高效的，但是隻適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

爲了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用 v-bind 來綁定動態值 (在這裏使用簡寫)：

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>

簡單來說就地複用就是能繼續用的dom就不重新渲染，這就導致了自定義指令傳參一直是第一次渲染的數據，我試了一下官方的解決方案，確實可以，dom被強制渲染了，後來我想找一種自定義指令裏就可以解決的方法，還真讓我找到了，自定義指令鉤子函數的第三個參數vnode：Vue 編譯生成的虛擬節點。
打印這個虛擬節點裏面有一個key，這個key就是上面說到的key，只要給他賦一個唯一的id，就可以強制dom刷新了

directives:{
    tap:{
        bind:function(el,binding,vnode){
            console.log(vnode)
            vnode.key = '一個唯一的id'
        }
    }
}