Vuejs Simple Convention

App.vue

<template lang="pug">
  #my-app
    .container
      my-component-a
      my-component-b
</template>

<style lang="sass?indentedSyntax" scoped>
  .container
    width: 800px //whatever
</style>

<script>
  const async       = require('async')
  const changeCase  = require('change-case')

  // Components
  // Convention: camel case
  const MyComponentA = require('./MyComponentA.vue')
  const MyComponentB = require('./MyComponentB.vue')
  const MyComponentC = require('./MyComponentC.vue')

  // List of data you want to watch.
  // Note MyComponentCData is not included. Therefore it is not watched.
  // Convention: 'component name' + 'Data'
  const componentsWithData = [
    'MyComponentAData', 'MyComponentBData'
  ]

  export default {
    props: {
    },
    components: {
      MyComponentA, MyComponentB, MyComponentC
    },
    data: function() {
      return {
        progress: 0,
        myOtherData: {},
        // Inject data like `MyComponentA: {}`
        ...Object.assign(...componentsWithData.map(function(w) { return {[w]: {}} }))
      }
    },
    // Inject watch like 'MyComponentAData': function(newData) {........}
    // On updating anything in componentsWithData array, it will emit an event.
    // Target component is listening to the event.
    watch: Object.assign(...componentsWithData.map(function(dataName) {
              return {
                [dataName]: function(newData) {
                  eventHub.$emit(dataName + 'Loaded', this[dataName])
                }
              }
            })
    ),
    computed: {
    },
    mounted: function() {
    },
    created: function() {
    },
    methods: {
      updateOnMounted: function() {
        this.update(componentsWithData)
      },
      update: function(components) {
        // Reset progress
        this.progress = 0
        // Things you want to submit
        let payload = {}
        // Function array for async.series() which fetches data and update components data.
        let funcs = components.map((w) => {
          // Convention: Api URLs are snake cased components' name
          return (callback) =>  { fetch('/api/your_api/' + changeCase.snakeCase(w), {
                                    method: 'POST',
                                    credentials: 'same-origin',
                                    headers: { 'X-CSRF-Token': getCsrfToken() },
                                    body: JSON.stringify(payload)
                                  })
                                  .then((res) => {
                                    return res.json()
                                  }).then((json) => {
                                    this[w] = json
                                    this.progress += 100/components.length // Increment progress
                                  })
                                  callback(null, 'success') // Callback for async.series()
                                }
        })
        async.series(funcs, (err, results) => {
          if (err) { throw err }
          console.log(err, results) // array of result
        })
      }
    }
  }
 <script>