Blogs-final.vue

<template>
  <div class="blogs-wrapper">
      <div class="blog" v-for="(blog, id) in blogs" v-bind:key=id>
          <div class="header">
              <span class="title">{{blog['title']}}</span>
          </div>
          <div class="body">
              <span>Published at: <b>{{blog['created_at']}}</b>, published by: <b>{{blog['author_name']}}</b></span>

              <p>
                  {{blog['body']}}
              </p>
          </div>
      </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Blogs extends Vue {
    public blogs: any;

    public data() {
        return {
            'blogs': [],
        };
    }

    async mounted() {
        try {
            const response = await fetch('http://localhost:8000/blogs');
            this.blogs = await response.json();
        } catch (e) {
            console.error(e)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .blogs-wrapper {
        width: 75vh;
        margin: 0 auto;

        .blog {
            padding: .5em;
            text-align: left;
            border: solid 1px #4db686;
            color: #374b5c;
            margin-bottom: .5em;

            .header {
                font-size: 1.25em;
                font-weight: bold;
                padding-bottom: .25em;
                margin-bottom: .25em;
                border-bottom: solid 1px #b69c4d;
            }

            .body {
                p {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>