<template>
  <div>
    <pre class="json">{{ json }}</pre>
  </div>
</template>

<script>
export default {
  async fetch() {
    const response = await this.$axios.get('http://localhost:3000/api/sync')
    const json = response.data
    this.$store.commit('setJson', json)
  },
  computed: {
    json() {
      return JSON.stringify(this.$store.state.json, null, 2)
    },
  }
}
</script>

<style lang="scss">
.json {
  margin: 1em 2em;
  color: #ffffff;
}
</style>
