How can i use filter for a table outside a vue component?

How can I use the filter input from the component outside in the blade file , while still being able to filter the table which is in the vuejs file?

ie: I want to restructure where the filter input.

In my Invoice Component vuejs file -

<template>
  <div class="my-5 container-fluid">
    <h2>Invoice inner</h2>
    <b-input-group class="mt-3 mb-3" size="sm">
      <b-form-input v-model="keyword" placeholder="Filter" type="text"></b-form-input>
    </b-input-group>
    <b-table :fields="fields" :items="items" :keyword="keyword"></b-table>
  </div>
</template>

<script>
.....
</script>

In my blade template-

@section('content')
<section class="user-info d-md-flex justify-content-between py-4 mb-5">
    <div class="d-flex align-items-center pb-3">
        <img class="rounded-circle user-img"
            src="https://images.pexels.com/photos/3095439/pexels-photo-3095439.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            alt="" />
   </div>

    <form class="form-inline">
       **//i want the filter input in this area and not above the table in the vue component and still be able to filter the table**
    </form>
</section>

<invoices-component />
@endsection