Vue Пользовательская директива не работает с тегом шаблона

Question

У меня проблема с приведенной ниже директивой, она работает с любым тегом, кроме тега шаблона.

  Vue.directive('count',{
  bind(el,b,v){
    console.log(b.value);
  },
  inserted(el,b,v){
        console.log(b.value);
  },
  update(el,b,v){
        console.log(b.value);
  }
});

new Vue({
  el: "#app"  ,
  data:{
     value:0
  }
})

<div id="app">
<button @click="value+=1">
inc value
</button>
   <template v-count="value">

   </template>

 <!--  <div v-count="value">

   </div> --> 
</div>

Если комментарий к div удален, директива регистрирует значение, но с хуки директивы тега шаблона не срабатывают

Здесь jsfiddle для проблемы

Спасибо

Answer 1

Тег шаблона фактически ничего не монтирует сам по себе, поэтому ему нет места в DOM и он не связывается. В вашем случае простое решение - просто поместить v-count = "value" в тег кнопки. Если в этой директиве есть более специализированная потребность, и вы просто даете нам код-заполнитель, размещение ее в SPAN или DIV в любом случае будет иметь больше смысла, чем шаблон.