js util functions

apiLoadAsync.js

import axios from 'axios'

export default async function (path, defaultResult) {
  try {
    const response = await axios.get(path)
    return response.data
  } catch (err) {
    console.log(path, defaultResult, err)
  }
  return defaultResult || {}
}

objEntriesCopy.js

export default function (destination, source) {
  Object.entries(source).forEach(entry => {
    const [key, value] = entry
    destination[key] = value
  })
}

UsageExample.vue

<template>
  <section>
    <h1>{{title}}</h1>
    <ul>
      <li v-for="elem in list" :key="elem.id">
        {{ elem.name }}
      </li>
  </section>
</template>

<script>
import apiLoadAsync from './apiLoadAsync'
import objEntriesCopy from './objEntriesCopy'

const pathToContent = id => process.env.CONTENT_ENDPOINT + id
const loadContent = async id => apiLoadAsync(pathToContent(id))

export default {
  name: 'TheContent',
  data () {
    return {
      title: 'Loading Content..',
      list: []
    }
  }
  async mounted () {
    const content = await loadContent(this.$route.params.id)
    objEntriesCopy(this, content)
  }
}
</script>