Example of data coupling in Vue component

example-coupling-todos.vue

// TODO's Index
<template>
  <ToDo v-for="todo in todos" :data="todo"/>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  mounted() {
   this.fetchToDos()
  },
  methods: {
    async fetchToDos() {
      this.todos = this.$api.get('todos?status=pending')
    }
  }  
}
</script>


// Recently Completed ToDos Summary
<template>
  <ToDo v-for="todo in todos" :data="todo"/>
</template>

<script>
export default {
  data() {
    return {
      todos: []
    }
  },
  mounted() {
   this.fetchToDos()
  },
  methods: {
    async fetchToDos() {
      this.todos = this.$api.get('todos?status=complete&order=desc&limit=5')
    }
  }  
}
</script>

// Single ToDo View
<template>
  // not relevant
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      require: true,
      default: ''
     },
  },
  data() {
    return {
      todo: {}
    }
  },
  mounted() {
   this.fetchToDo()
  },
  methods: {
    async fetchToDos() {
      this.todos = this.$api.get(`todos/${this.id}`)
    }
  }  
}
</script>