I Can't Find Vue.js Input in Test.

I Have a test where "search" is the name of an input in a Vue.js component. The test attempts to type into the search input and filter out all the data entries (so none of them are visible).

However, I am getting the following error:

1. TicketTest::a_user_goes_to_ticket_and_filters_out_all_tickets_with_search InvalidArgumentException: Nothing matched the filter [#ticket-search] CSS query provided for [http://localhost/client/ticket].

Here is the Test

   public function a_user_goes_to_ticket_and_filters_out_all_tickets_with_search() {
        $user = User::find(2);
        $this->actingAs($user);
        $this->visit('/client/ticket');
        $this->type("AAAAA", "search");
        foreach ($tickets as $ticket) {
            $this->dontSee($ticket->id);
        }
    }

Here is the relevant portion of the component:

<template>
 <div>
        <div class="box-body">
        <div class="input-group" id="box-table-search-group">   
                <input 
                     type="text" 
                    class="form-control" 
                    id="ticket-search" 
                    name="search" 
                    placeholder="Search" 
                    v-model="filterByKeywords"
                >
        <!-- A Table with Ticket Data and Columns such as id and description -->
    </div>
    </div>
</div>
</template>

I have also tried running the test using "#ticket-search" instead of just "search" (the name of the input) but get the same error.

When I load the view with the component in the browser, it does take about half a second for the component to compile and appear.

Is the test just not waiting for the javascript to load? If so, is it possible to have the test wait after hitting the page? Or is the $this->type() function angry that I do not have form tags around my input?

Any advice is appreciated. Thanks!