Bind Vue-switch value to data prop

I am using vue-switch that toggles on and off and I need to know what state it's in. According to the documentation at http://ift.tt/2wPkmnt I am just supposed to use :value.sync="toggle" in the switch component with a data property called 'toggle', which I've done. I'm getting the following error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" vue switch found in ---> <Switcher> at E:\Dev\BackgroundCheck.Members\front-end\node_modules\vue-switch\switch.vue

My HTML:

<switcher size="lg" color="green" :value.sync="toggle"></switcher>

My JS:

<script>
import mySwitch from 'vue-switch';

export default {
  name: 'BackgroundReports',
  components: {
    'switcher': mySwitch
  },
  computed: {
    report() { return this.$store.getters.currentReport },
    isBeingMonitored() { return this.$store.getters.isBeingMonitored }
  },
  mounted() {
    this.toggle = this.isBeingMonitored;
  }
}
</script>

The switch.vue code:

<template>
    <div :class="className" @click="onClick">
        <span class="open"></span>
        <span class="close"></span>
    </div>
</template>

<script>
'use strict';

export default {
    props: {
        value: {
            default: true,
            twoWay: true
        },
        size: {
            type: String,
            default: 'md中'
        },
        // blue red green orange
        color: {
            type: String,
            default: 'red'
        },
        openValue: {
            default: true
        },
        closeValue: {
            default: false
        },
        openName: {
            type: String,
            default: 'ON'
        },
        closeName: {
            type: String,
            default: 'OFF'
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        className() {
            let {
                value,
                openValue,
                closeValue,
                size,
                color,
                disabled
            } = this;
            return {
                'vue-switch': true,
                'z-on': value === openValue,
                'z-disabled': disabled,
                ['s-' + size]: true,
                ['c-' + color]: true
            };
        }
    },
    methods: {
        onClick() {
            let {
                disabled,
                value,
                openValue,
                closeValue
            } = this;
            if (!disabled) {
                if (openValue === value) {
                    this.value = closeValue;
                } else {
                    this.value = openValue;
                }
            }
        }
    }
}

</script>