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 here instead? In order to transport whatever the user types into this search box to the server for processing, we'll need to push the value into the URL query object again. As such, we'll...