Single file component <script> section

In this part, we will change the <script> section of the single file component. Follow these steps to do it:

1. Open the App.vue file in the src folder.
2. We need to import the new getTodos function as follows:

import {
  getHttp,
  postHttp,
  patchHttp,
  deleteHttp,
  getTodos,
} from './http/fetchApi';

3. In the data property of the Vue object, we need to create a new property called userTodo, with the default value of an empty array:

data: () => ({
  response: undefined,
  userData: '',
  userId: undefined,
  userTodo: [],
}),

4. In the methods property, we need to create a new method called getUserTodo that receives the userId argument. This method will fetch the list of to-do items of the user and will attribute the response to the userTodo property:

async getUserTodo(userId) {
  this.userTodo = await getTodos(userId);
},