How to do it...

To start our component, we can create our Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem, or use the project from the 'Creating the "hello world" component' recipe.

Now, let's follow these steps to create an input form with a two-way data binding:

1. Let's create a new file called TaskInput.vue in the src/components folder.
2. In this file, we're going to create a component that will have a text input and a display text. This text will be based on what is typed on the text input. At the <template> part of the component, we need to create an HTML input and a mustache variable that will receive and render the data:

<template>
  <div class='cardBox'>
    <div class='container tasker'>
      <strong>My task is: {{ task }}</strong>
      <input 
        type='text'
...