Vue.js use directive to change binding of different components

I'm new to vue.js and I'm having some troubles understanding the binding concept of vue. I'm currently using laravel spark as enviroment.

What I want to achieve is a binding different components against the same object. I want to use a vue directive to make http requests and put the results in this globally available object which has different components bound to it.

I have the following setup:

A global vue data object to store passwords. Using Vue Devtools I can see it's under Root > Spark > passwords

A directive to send http requests using vue resource:

Vue.directive('secret', {    
    bind: function() {
        this.el.addEventListener('submit', this.onFormSubmit.bind(this));
    },

    update: function() {

    },

    onFormSubmit: function(e) {
        e.preventDefault();

        var data = { 
            'secret' : this.el.querySelector('input[name="secret"]').value
        };

        this.vm.$http[this.getRequestType()](this.el.action, data)
            .then(this.onComplete.bind(this));
    },

    getRequestType: function() {
        var method = this.el.querySelector('input[name="_method"]');

        retu (method ? method.value : this.el.method).toLowerCase();
    },

    onComplete: function(data) {
        this.$root.spark.passwords = data;
    }
});

A component which should be bound to the data

<template id="passwords-list-template">
    <div class="password" v-for="password in list">
        <ul>
            <li>{{ password.name }}</li>
            <li>{{ password.description }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    template: '#passwords-list-template',

    data : function() {
        retu { list : this.$root.spark.passwords }
    }
};
</script>

As mentioned I'm new to vue - therefore I'm happy about each hint.