title: How to fire an event on Vue switch change
body: <p>I have a Vue component that has a vue-switch element. When the component is loaded, the switch has to be set to ON or OFF depending on the data. This is currently happening within the 'mounted()' method. Then, when the switch is toggled, it needs to make an API call that will tell the database the new state. This is currently happening in the 'watch' method. </p>
  
  <p>The problem is that because I am 'watching' the switch, the API call runs when the data gets set on mount. So if it's set to ON and you navigate to the component, the mounted() method sets the switch to ON but it ALSO calls the toggle API method which turns it off. Therefore the view says it's on but the data says it's off.</p>
  
  <p>I have tried to change the API event so that it happens on a click method, but this doesn't work as it doesn't recognize a click and the function never runs. </p>
  
  <p>How do I make it so that the API call is only made when the switch is clicked?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;switcher size="lg" color="green" open-name="ON" close-name="OFF" v-model="toggle"&gt;&lt;/switcher&gt;  
  </code></pre>
  
  <p>VUE</p>
  
  <pre><code>data: function() {
      return {
          toggle: false,
          noAvailalableMonitoring: false
      }
  },
  computed: {
      report() { return this.$store.getters.currentReport },
      isBeingMonitored() { return this.$store.getters.isBeingMonitored },
      availableMonitoring() { return this.$store.getters.checkAvailableMonitoring }
  },
  mounted() {
      this.toggle = this.isBeingMonitored;
  },
  watch: {
      toggle: function() {
        if(this.availableMonitoring) {
            let dto = {
              reportToken: this.report.reportToken,
              version: this.report.version
            }
            this.$store.dispatch('TOGGLE_MONITORING', dto).then(response =&gt; {
            }, error =&gt; {
            console.log("Failed.")
        }) 
      } else {
          this.toggle = false;
          this.noAvailalableMonitoring = true;
      }
    }
  }
  </code></pre>