parsley/app/javascript/components/TheRecipeList.vue

<template>
  <div>
    <h1 class="title">Recipes</h1>

    <button type="button" class="button">Create Recipe</button>

    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="r in recipes" :key="r.id">
          <td>{{r.name}}</td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>

  import api from "../lib/Api";

  export default {
    data() {
      return {
        recipeData: null
      };
    },

    created() {

      this.loadResource(api.getRecipeList(), data => this.recipeData = data);

    },

    computed: {
      recipes() {
        if (this.recipeData) {
          return this.recipeData.recipes;
        } else {
          return [];
        }
      }
    }
  }

</script>