title: Laravel Dusk - Check box not clicking
body: <p>I'm developing a few browser tests using Laravel Dusk for my VueJs/Laravel Application.
  I'm trying to &quot;check&quot; a checkbox but I'm having issues. I managed to wait for its parent element to be visible, but when I check the checkbox and assert value to see if it's true, I get an error.</p>
  <p><strong>My test file</strong></p>
  <pre><code>$this-&gt;browse(function ($browser) {
          
          $browser-&gt;visit(route('login'))
                  -&gt;assertPathIs('/login')
                  -&gt;type('email', $this-&gt;user-&gt;email)
                  -&gt;type('password', 'password')
                  -&gt;press(trans('auth.login'))
                  -&gt;assertPathIs('/dashboard')
                  -&gt;visit(route('settings.edit', $this-&gt;customer-&gt;uuid))
                  -&gt;assertPathIs('/settings/edit/'.$this-&gt;customer-&gt;uuid)
                  -&gt;whenAvailable('@switch-input-tfa', function() use ($browser) {
                      $browser-&gt;check('switch-input')
                              -&gt;pause(2000)  
                              //This fails                            
                              -&gt;assertInputValue('switch-input', true);
                  }, 4)
                  -&gt;press(trans('nav-side.logout'))
                  -&gt;assertPathIs('/login');
  
  
      });
  </code></pre>
  <p><strong>Vue JS File</strong></p>
  <pre><code>&lt;div class=&quot;flex&quot;&gt;
      &lt;h3 class=&quot;flex-grow text-lg leading-6 font-medium text-gray-900 mb-2&quot;&gt;
          {{ __('settings.2fa_global') }}
      &lt;/h3&gt;
      &lt;switch-input
          dusk=&quot;switch-input-tfa&quot;
          v-model=&quot;form.tfa_enabled&quot;
          @change=&quot;settingChanged($event,'tfa_enabled')&quot;
          show-icons
          :inactive-value=&quot;false&quot;
          :active-value=&quot;true&quot;
          inactive-icon=&quot;times&quot;
          active-icon=&quot;check&quot;
          :show-on-right=&quot;false&quot;
      /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Switch-input component</strong></p>
  <pre><code>&lt;div&gt;
      &lt;input name=&quot;switch-input&quot; 
             class=&quot;w-full h-full absolute inset-0 opacity-0&quot; 
             type=&quot;checkbox&quot; 
             @change=&quot;handleChange&quot; 
             ref=&quot;input&quot; 
             v-bind=&quot;$attrs&quot; 
             :class=&quot;[$attrs.disabled ? '' : 'cursor-pointer']&quot;
      &gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>The error message</strong></p>
  <blockquote>
  <p>Expected value [1] for the [switch-input] input does not equal the actual value [on].
  Failed asserting that 'on' matches expected true.</p>
  </blockquote>
  <p>I also tried with the &quot;uncheck&quot; function ,but I still get the same error that actual value is ON</p>