Vue.js benutzerdefinierte Direktive nicht ComponentUpdated Hook?

Question

So, wenn ich den Code unter dem bind Hook triggert, gerade gut, aber der ComponentUpdated Hook scheint nie zu laufen, trotz der Klasse der Komponente es ist verpflichtet, von "neutral" zu "include" zu ändern. Kann mir jemand helfen festzustellen, warum das Update nie ausgeführt wird, selbst wenn auf eine Instanz der Komponente mit der angefügten Anweisung geklickt wird?

HTML

<ternary-toggle display-text="Broken" v-ternary="'baz'"></th> 

JS

Vue.directive('ternary', { 
    bind: function(el, binding) { 

     var instanceName = JSON.stringify(binding.value); 
     if (this['_' + instanceName] == undefined) { 
      this['_' + instanceName] = {}; 
     } 
    }, 
    componentUpdated: function(el, binding) { 
     var instanceName = JSON.stringify(binding.value); 
     console.log(instanceName); 
    } 
}); 

var ternaryToggle = Vue.component('ternary-toggle', { 
    props: ['displayText'], 
    data: function() { 
     return { 
      state: 'neutral', 
      stateTransitions: { 
       neutral: 'include', 
       include: 'exclude', 
       exclude: 'neutral' 
      } 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.state = this.stateTransitions[this.state] 
      this.$emit('switched', this.state) 
     } 
    }, 
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>' 
}); 

Answer 1

Diese nicht ganz richtig, die Frage zu beantworten (kann mich nicht erinnern, warum diese Lösung gearbeitet hat), aber es ist ein Versuch, @Jeppebm zu helfen. So kann ich mich nicht erinnern den genauen Grund, warum aber folgendes war das, was ich am Ende mit:

var ternaryToggle = Vue.component('ternary-toggle', { 
    props: ['displayText', 'toggleId'], 
    data: function() { 
     return { 
      state: 'neutral', 
      stateTransitions: { 
       neutral: 'include', 
       include: 'exclude', 
       exclude: 'neutral' 
      } 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.state = this.stateTransitions[this.state] 
      this.$emit('switched', this.toggleId, this.state) 
     } 
    }, 
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>' 
}); 

Ich denke, die allgemeine Schlussfolgerung kam ich zu gewesen sein könnte, nur die benutzerdefinierte Richtlinie Graben für diese Bemühungen.