javascript - vue.directive 全局指令复用问题

Question

想实现页面内的markdown，markdown模块这些都没问题

注册一个全局指令

Vue.directive('mark', function (el) {
    el.innerHTML = el.innerText;
  });

然后使用

<p v-mark>{{ article.markdown }}</p>

问题是我第一个页面能够实现，而第二个页面却实现不了，p内为空，连markdown的文字都没有。

尝试修改全局指令，当如下时

Vue.directive('mark', {
   componentUpdated: function (el) {
    el.innerHTML = el.innerText;
    }
  });

第二个页面有效果了，但第一个页面却失去效果了。
请问这是为什么？

补充：
打开页面时没有markdown数据，但是隶属于同一article对象的date、title等数据能显示