update data in component from Vue.directive - vue.js

Question

I have a directive that needs to update data in a Vue.component. How do I set the value? Here is my code:
Vue.directive('loggedin', function(value) {
console.log('loggedin = ' + value);
vm.$set('loggedIn', value);
});
vm.$set('loggedIn', value) does not work. I get the following error:
Uncaught TypeError: Cannot read property '$set' of undefined
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list'],
data: function() {
return {
loggedIn: '',
billingAddr: [],
shippingAddr: [],
}
},
});
The value being passed is 'true' or 'false'.
EDIT
I need to bind <div v-loggedin="true"></div> to my data value in the component and set that to 'true'. I do not need two-way binding.
Maybe I'm going about this the wrong way. Basically, I get a value for loggedin from the server and need to set my loggedIn value to true or false in the data on the component.

Answer 1

I'm not sure how you are using your directive, so I'm just going to make an assumption. Please correct me if I'm wrong.
Have a look at the twoWay property (you would probably need to use the object syntax though):
Vue.directive('loggedin', {
twoWay: true, // Setup the two way binding
bind: function () {
},
update: function (newValue) {
console.log('loggedin = ' + value);
this.set(newValue); // Set the new value for the instance here
},
unbind: function () {
}
});
Then you can use the directive like this (loggedIn is the property you want to write to afterwards, and which serves as the initial value as well):
<yourelement v-loggedin="loggedIn">...</yourelement>
Regarding your edit
Since you only want to pass data from your server to the component, you're much better of just using props:
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list', 'loggedIn'],
data: function() {
return {
billingAddr: [],
shippingAddr: [],
}
},
});
And then when using your component, pass it:
<checkout :loggedIn="true">
...
</checkout>

Answer 2

I have decided to go another route. There had to be a simpler way of doing this. So, here is what I did.
I am checking if a user is logged in by doing an ajax request through the 'created' function on the vm. I then update the auth variable in the vm with true or false.
var vm = new Vue({
el: 'body',
data: {
auth: false,
},
methods: {
getData: function() {
this.$http.get('{!! url('api/check-for-auth') !!}').then(function(response) {
this.auth = response.data;
}.bind(this));
},
},
created: function() {
this.getData();
},
});
In the component I created a props item called 'auth' and bound it to the auth data on the vm.
var ck = Vue.component('checkout', {
template: '#checkout-template',
props: ['list', 'auth'],
data: function() {
return {
user: [],
billingAddr: [],
shippingAddr: [],
}
},
});
And my component
<checkout :list.sync="cartItems" :auth.sync="auth"></checkout>
Thanks everyone for your help.