Vue CRUD Component basic example

<template>
  <div>
    <Toggable :title="`PROFILE OF ${active.name}`">
      <UserForm :active="active"
                @save="save($event)" />
    </Toggable>

    <hr>

    <Toggable :title="`TOTAL ${users.length}`">
      <UsersList :items="users"
                 :active="active"
                 @select="setActive($event)"
                 @delete="deleteMe($event)" />
    </Toggable>

  </div>
</template>

<script>
  import axios from 'axios';

  import Toggable from '../../components/Toggable.vue';
  import UserForm from './components/UserForm.vue';
  import UsersList from './components/UsersList.vue';

  export default {
    created() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then((res) => {
          this.users = res.data;       //  list of users
          this.active = this.users[0]; // current active user
        })
    },
    data() {
      return {
        users: [],
        active: {},
      }
    },
    methods: {
      setActive(user) {
        console.log('set', user)
        this.active = user;
      },
      deleteMe(user) {
        // ...
      },
      save(formData) {
        this.active = {...formData};
        this.update(formData);
      },
      update(userUpdated) {
        // ...
      }
    },
    components: {
      Toggable,   // this should not be local but moved to global
      UserForm, UsersList
    },
  }
</script>