Conditional validation in VueJS

I am using VueJS with vue-validator and I have been struggling for hours to do simple conditional validation. The example provided in the documentation does not seem to work, at least not in my case.

What I am trying to accomplish is requiring two input groups (observer_firstName and observer_lastName) if a condition (showObserverEntry) is true and requiring another (role) if it is false.

So, if showObserverEntry is false, role should be required/visible. If showObserverEntry is true, role SHOULD NOT be required or visible, observer_firstName and observer_lastName should be required and visible.

Everything works when the page is loaded and showObserverEntry is set to false, it continues to work when switched to true, but when it goes back to false again validation stops working for role. Peeking at the data output, the validation data changes to validation { } where it initially has data.

Vue instance with other methods removed:

var vm = new Vue({
    el: "#scheduleContainer",
    validator: {
        validates: {
            requiredIf: function (val, condition){
                return val && condition
            }
        }
    },
    data: {
        loading: true,
        stationId: stationId,
        date: initialDate,
        dateFormatted: initialDateFormatted,
        nextDate: null,
        prevDate: null,
        entries: [],
        requestEntries: [],
        roles: [],
        roleStaff: [],
        showObserverEntry: false,
        startPickerDatetime: null,
        endPickerDatetime: null,
        shiftEntry: {
            start: null,
            end: null,
            role: null,
            member: "",
            observer: {
                firstName: "",
                lastName: ""
            }
        }
    },
    computed: {
        validField: function () {
            return this.validation.shiftEntry.observer.firstName.valid &&
                this.validation.shiftEntry.observer.lastName.valid
        }
    },
    methods: {
        getRoleStaff: function () {
            if (this.shiftEntry.role != '' && this.shiftEntry.role != 'observer') {
                this.$http.post('/members/schedule/manage/json/roles/staff', {id: this.shiftEntry.role})
                    .success(function (data) {
                        this.$set('roleStaff', data.members);
                        vm.shiftEntry.member = "";
                        vm.showObserverEntry = false;
                        vm.shiftEntry.observer.firstName = "";
                        vm.shiftEntry.observer.lastName = "";
                    });
            } else if (this.shiftEntry.role == 'observer') {
                this.showObserverEntry = true;
                this.resetFields()
            }
            else {
                this.showObserverEntry = false;
                this.roleStaff = [];
            }
        },
        resetFields: function () {
            this.roleStaff = [];
            this.shiftEntry.role = "";
            this.shiftEntry.member = "";
            this.shiftEntry.observer.firstName = "";
            this.shiftEntry.observer.lastName = "";
        },
        conditionalField: function (response, type) {
            return response === type
        }
    }
});

Form fields:

<div class="form-group"
                                 v-if="conditionalField(showObserverEntry, false)"
                                 v-class="has-error: validation.shiftEntry.member.invalid">
                                <label for="member">Member:</label>
                                <select name="member"
                                        id="member"
                                        v-model="shiftEntry.member"
                                        options="roleStaff"
                                        v-attr="disabled: !roleStaff.length"
                                        class="form-control"
                                        v-validate="requiredIf: conditionalField(showObserverEntry, false)">
                                    <option value="">Select Member</option>
                                </select>
                            </div>
                            <div class="form-group"
                                 v-if="conditionalField(showObserverEntry, true)"
                                 v-class="has-error: validation.shiftEntry.observer.firstName.invalid">
                                <label for="observer_firstName">First Name:</label>
                                <input type="text"
                                       id="observer_firstName"
                                       class="form-control"
                                        v-model="shiftEntry.observer.firstName"
                                        v-validate="requiredIf: conditionalField(showObserverEntry, true)">
                            </div>
                            <div class="form-group"
                                 v-if="conditionalField(showObserverEntry, true)"
                                 v-class="has-error: validation.shiftEntry.observer.lastName.invalid">
                                <label for="observer_lastName">Last Name:</label>
                                <input type="text"
                                       id="observer_lastName"
                                       class="form-control"
                                       v-model="shiftEntry.observer.lastName"
                                       v-validate="requiredIf: conditionalField(showObserverEntry, true)">
                            </div>