title: Bind Vue-switch value to data prop
body: <p>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 <a href="https://www.npmjs.com/package/vue-switch" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-switch</a> 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: </p>
  
  <pre><code>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 ---&gt; &lt;Switcher&gt; at E:\Dev\BackgroundCheck.Members\front-end\node_modules\vue-switch\switch.vue
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;switcher size="lg" color="green" :value.sync="toggle"&gt;&lt;/switcher&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>&lt;script&gt;
  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;
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The switch.vue code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div :class="className" @click="onClick"&gt;
          &lt;span class="open"&gt;{{ openName }}&lt;/span&gt;
          &lt;span class="close"&gt;{{ closeName }}&lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  '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;
                  }
              }
          }
      }
  }
  
  &lt;/script&gt;
  </code></pre>