Vue.js自定义指令不运行componentUpdated钩子？

Question

So when I load the code below the bind hook triggers just fine, however the componentUpdated hook never seems to run despite the class of the component it is bound to changing from "neutral" to "include". Can someone help me determine why the update is never run even when an instance of the component with the attached directive is clicked?

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

This doesn't quite properly answer the question (can't recall why this solution worked) but it's an attempt to help @Jeppebm. So I can't recall the precise reason why but the following was what I ended up with:

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>'
});

I think the overall conclusion I came to might have been to just ditch the custom directive for this effort.