Single file component <script> section

In this part, we will create the <script> section of the single file component. Follow these instructions to create the component correctly:

1. Move the view.vue file from src/components to the src/views folder and rename it as View.vue.
2. Remove the old changeComponent mixin import and import the new changeRoute mixin:

import changeRouteMixin from '@/mixin/changeRoute';

3. At the Vue mixins property, we need to replace changeComponent with changeRoute:

mixins: [changeRouteMixin],

4. Create a new computed property in the component object, with the property userId, which will return $route.params.id:

computed: {
  userId() {
    return this.$route.params.id;
  },
},

5. On the getUserById method, we need to remove ${window.location.href} from the getHttp function URL:

methods: {
  async getUserById() {
    const { data } = await getHttp(`api/users/${this.userId}`);
    this.userData = data;
  },
}