Creating a search bar component

To finish off our product catalog, we're going to add a basic search bar to give our users even more control over the product list they're browsing. Let's start by creating a new component named SearchBar.vue in the ClientApp/components/catalogue directory. The template section for this component is very simple:

<template>
  <div>
    <b-form-input
      :value="query"
      type="text"
      placeholder="Search..."
      @change="update"
      @keyup.enter.native="search">
    </b-form-input>
  </div>
</template>

All we're rendering is a text input field, with a few standard attributes such as a placeholder of "Search…". However, usually, we would use the v-model directive on text inputs, so why are we binding the value of the text input...