title: Intercept checkbox change event in VueJS
body: <p>I have a long set of checkboxes. I would like two groups of three of them to behave as radio buttons. Now, leaving aside my UX choices, how can I make this work?</p>
  <p>The checkboxes are implemented as properties on a single object, <code>layer</code>:</p>
  <pre class="lang-js prettyprint-override"><code>data() {
    return {
      layer: {},
    }
  },
  watch: {
    layer: {
      handler(val, oldval) {
        mapping.updateLayers(val)
      },
      deep: true,
    },
  },
  </code></pre>
  <p>That works fine. But intercepting <code>val</code> and updating <code>this.layer</code> inside <code>handler()</code> doesn't:</p>
  <pre class="lang-js prettyprint-override"><code>handler: function(val, oldval) {
    if (val.FutureYear) { this.layer.NextYear = false; this.layer.ExistingYear = false; }
    if (val.ExistingYear) { this.layer.NextYear = false; this.layer.FutureYear = false; }
    if (val.NextYear) { this.layer.ExistingYear = false; this.layer.FutureYear = false; }
    mapping.updateFoiLayers(val);
  },
  </code></pre>
  <p>How can I achieve this result? (I'd prefer not to have to implement actual radio buttons because that makes managing all the layers and UI more complex.)</p>