Vue component data n00b issues

ContactList.vue

<template>
    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="filter fdiv" id="filter">
                    <button type="button" v-on:click="toggleSelectAll" class="btn btn-primary">
                        <span v-if="selectAllActive"><i class="fa fa-check-square"></i> <span class="micit-button-label">Deselect</span> all</span>
                        <span v-else><i class="fa fa-square"></i> <span class="micit-button-label">Select</span> all</span>
                    </button>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Show
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li v-for="listFilterOption in listFilterOptions">
                                <a v-on:click.prevent="filterList(listFilterOption)" v-bind:data-filter-option="listFilterOption" href="#">${listFilterOption}</a>
                            </li>
                        </ul>
                    </div>
                    <button v-on:click="blockContacts" class="btn btn-primary" v-bind:disabled="!blockButtonActive"><i class="fa fa-fw fa-ban"></i> <span class="micit-button-label">Block</span> </button>
                    <button v-on:click="unBlockContacts" class="btn btn-primary" v-bind:disabled="!unBlockButtonActive"><i class="fa fa-fw fa-eye"></i> <span class="micit-button-label">Unblock</span></button>
                    <button v-on:click="unfriendContacts" class="btn btn-primary" v-bind:disabled="!deleteButtonActive"><i class="fa fa-fw fa-trash-o"></i> <span class="micit-button-label">Unfriend</span></button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h3>${listFilterLabel}</h3>
                <div v-if="contacts.length === 0" class="alert alert-warning">
                    <p>
                        Blah, blah, blah.
                    </p>
                </div>
            </div>
        </div>
        <div class="row">
        </div>
    <div>
</template>

<script>
export default {
    created: function () {
        console.debug('contact-list component created.');
    },
    props: ['friends', 'myUserId', 'imagesEndpoint'],
    data: {
            selectAllActive: false,
            listFilter: 'friends',
            listFilterOptions: [
                'Active Friends',
                'Blocked Friends',
                'All Friends'
            ],
            blockButtonActive: false,
            unBlockButtonActive: false,
            deleteButtonActive: false,
            selectedContacts: [],
            modalData: {
                "name": 'Foo Bar',
                "email": '[email protected]',
                "uuid": '0',
                "blocked": 0,
                "avatar": '',
                "created": '',
                "purchased": '',
                "sold": '',
                "myUserId": ''
            },
            contacts: _.map(friends, function(n) {
                // add properties we will need in each contact
                n.selected = false;
                n.shown = !n.blocked;
                n.myUserId = this.myUserId;
                return n;
            }),
            myUserId: this.myUserId,
            imagesEndpoint: this.imagesEndpoint
    },
    computed: {
        selectedContacts: function () {
            return _.pluck(
                _.filter(this.$refs.contacts, {selected: true, shown: true}),
                'id'
            );
        },
        listFilterLabel: function () {
            switch(this.listFilter) {
                case 'Blocked Friends':
                    return 'Blocked Friends';
                    break;
                case 'All Friends':
                    return 'All Friends';
                    break;
                case 'Active Friends':
                default:
                    return 'Active Friends';
                    _.forEach(this.$refs.contacts, function(n, key) {
                        n.shown = !n.blocked;
                    }, this);
            }
        }
    },
    methods: {
        toggleSelectAll: function() {
            this.selectAllActive = !this.selectAllActive;
            this.selectAll(this.selectAllActive);
        },
        selectAll: function(state) {
            _.forEach(this.$refs.contacts, function(n, key) {
                n.select(!!state);
            }, this);
        },
        filterList: function (state) {
            switch(state) {
                case 'Blocked Friends':
                    this.$refs.contacts = _.forEach(this.$refs.contacts, function(n, key) {
                        n.shown = n.blocked;
                    }, this);
                    break;
                case 'All Friends':
                    this.$refs.contacts = _.forEach(this.$refs.contacts, function(n, key) {
                        n.shown = true;
                    }, this);
                    break;
                case 'Active Friends':
                default:
                    this.$refs.contacts = _.forEach(this.$refs.contacts, function(n, key) {
                        n.shown = !n.blocked;
                    }, this);
            }
            this.listFilter = state;
            this.updateActionButtonStates();
        },

        unfriendContact: function(userId, targetId) {
            // send POST /unfriend
            var xhr = FriendsApi.unfriend(userId, targetId);
            // when responds, no matter what, remove from contacts list
            xhr.always(_.bind(function() {
                // remove by id
                this.contacts = _.reject(this.contacts, function(n) {
                    return n.uuid === targetId;
                });
            }, this));
        },

        blockContact: function(userId, targetId) {
            // send POST /block
            var xhr = FriendsApi.block(userId, targetId);
            // when responds, no matter what, remove from contacts list
            xhr.always(_.bind(function() {
                this.contacts = _.forEach(this.contacts, function(n) {
                    if (n.uuid === targetId) {
                        n.blocked = true;
                        return;
                    }
                });
            }, this));
        },

        unBlockContact: function(userId, targetId) {
            // send POST /block
            var xhr = FriendsApi.unblock(userId, targetId);
            // when responds, no matter what, remove from contacts list
            xhr.always(_.bind(function() {
                this.contacts = _.forEach(this.contacts, function(n) {
                    if (n.uuid === targetId) {
                        n.blocked = false;
                        return;
                    }
                });
            }, this));
        },

        unfriendContacts: function () {
            bootbox.confirm('Unfriend selected users?', _.bind(function(result) {
                if (result) {
                    _.forEach(this.selectedContacts, function(targetId) {
                        this.unfriendContact(this.myUserId, targetId);
                    }, this);
                }
            }, this));
        },
        blockContacts: function () {
            bootbox.confirm('Block selected users?', _.bind(function(result) {
                if (result) {
                    _.forEach(this.selectedContacts, function(targetId) {
                        this.blockContact(this.myUserId, targetId);
                    }, this);
                }
            }, this));
        },
        unBlockContacts: function () {
            bootbox.confirm('Unblock selected users?', _.bind(function(result) {
                if (result) {
                    _.forEach(this.selectedContacts, function(targetId) {
                        this.unBlockContact(this.myUserId, targetId);
                    }, this);
                }
            }, this));
        },

        updateActionButtonStates: function() {
            if (this.selectedContacts.length > 0) {
                this.blockButtonActive = true;
                this.unBlockButtonActive = true;
                this.deleteButtonActive = true;
            } else {
                this.blockButtonActive = false;
                this.unBlockButtonActive = false;
                this.deleteButtonActive = false;
            }
        },
    },
    events: {
        'contact-selected': function(id) {
            this.updateActionButtonStates();
        },
        'show-contact-modal': function(id) {
            // look-up the contact based on the ID passed with the event
            var contact = _.find(this.contacts, {'uuid': id});
            console.debug(contact);
            // assign the contact data to the modalData hash, which updates the props on the modal component
            this.modalData = _.assign(this.modalData, contact);
            // send this down to child components so modal component can react to it
            this.$broadcast('show-contact-modal', this.modalData);
        },
        'unfriend': function(myUserId, targetId) {
            this.unfriendContact(myUserId, targetId);
        },
        'block': function(myUserId, targetId) {
            this.blockContact(myUserId, targetId);
        },
        'unblock': function(myUserId, targetId) {
            this.unBlockContact(myUserId, targetId);
        }
    }
}
</script>

page.html

<contact-list
    :friends="friends"
    :myUserId="myUserId"
    :imagesEndpoint="imagesEndpoint">
</contact-list>

<script>
  // ... snip ...
  var friends = preload.friends;
  var myUserId = preload.myUserId;
  var imagesEndpoint = preload.imagesEndpoint;
</script>