Laravel 如何对vue组件外部的表使用筛选器？

如何在仍然能够过滤vuejs文件中的表的同时，使用刀片文件外部组件的过滤器输入

ie：我想重新构造过滤器输入的位置

在我的发票组件vuejs文件中-

<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>

内部发票
.....

在我的刀片模板中-

@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

@节（“内容”）
**//我希望过滤器输入位于该区域，而不是vue组件中的表上方，并且仍然能够过滤该表**
@端部

将组件注册为窗口对象

const app = new Vue({
    ...
});

window.app = app;

然后创建一个可以更改应用程序模型的输入

<input type="text" onchange="window.app.keyword = this.value" />

谢谢您的建议。我尝试过这种方法，但它不能按需要工作。不确定这是否是问题所在，组件是否重新编译

npm run dev

？是的，它总是在运行。我尝试过将输入值作为道具传递，请告诉我是否可以像