title: Toggle button component how to reset from parent
body: <p>There is a toggle component, which I connect to the parent. Found a bug, haven't found a solution yet.</p>
  <p><strong>toggle-button</strong></p>
  <pre><code>&lt;template&gt;
   &lt;label :for='id + &quot;_button&quot;' :class='{&quot;active&quot;: isActive}' class='toggle__button'&gt;
    &lt;input type='checkbox' :id='id + &quot;_button&quot;' v-model='checkedValue'&gt;
    &lt;span class='toggle__switch'&gt;&lt;/span&gt;
   &lt;/label&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
   export default ({
    props: {
     defaultState: {
     type: Boolean,
     default: false
    },
    id: {
     type: String,
     default: 'primary'
     }
    },
    data() {
     return {
      currentState: this.defaultState
     };
    },
    computed: {
     isActive() {
      return this.currentState;
    },
    checkedValue: {
      get() {
       return this.defaultState;
      },
      set(newValue) {
       this.currentState = newValue;
       this.$emit('change', newValue);
      }
     }
    },
  
    methods: {
     reset() {
     this.currentState = false ;
     }
    }
    });
    &lt;/script&gt;
  </code></pre>
  <p>how can i succinctly make a reset button? I use this option now, but after reset, when I click on toggle, it does not work the first time.</p>
  <pre><code>&lt;button
            @click='
            $refs.toggleOriginal.reset($event),
            $refs.toggleAnalog.reset($event),
            $refs.toggleAvailable.reset($event)
          '
        &gt;
          reset
        &lt;/button&gt;
  </code></pre>
  <p>Each toggle has <code>ref</code> in parent.</p>