how to keep state in vue jsx component?

i want to render a search input in table column heads, it needs keeping a keyword state in itself, but it's value won't change with user input. so how to resolve the keyword state?

text code here

function renderInputFilter(submit: (keyword: string) => void) {
  const keyword = ref('')
  return <div>
    <ElInput placeholder="input keyword" v-model={keyword.value} />
    <ElButton type="primary" icon="el-icon-search" onClick={() => submit(keyword.value)} />
  </div>
}