vue+json

<template>
  <div id="app" :class="[$style.wrapper]">
    <header>
      <h1>My personal cost</h1>
    </header>
    <main>
      <AddPayment @addNewPayment="addData"/>
      <br/>
      <PaymentsDisplay :list="['test', 'data']" />
      {{ this.paymentsList }}
    </main>
  </div>
</template>

<script>
import PaymentsDisplay from "./components/PaymentsDisplay.vue";
import AddPayment from "./components/AddPayment.vue";


export default {
  name: "App",
  components: {
    PaymentsDisplay,
    AddPayment
  },
  data: () => ({
    paymentsList: [],
    data: {
      form :  "qw"
    }
  }),
  methods: {
    addData(data){
      console.log("push to state",data)
      // this.paymentsList.push(data)
      this.paymentsList = [...this.paymentsList, data]
    },
    fetchData() {
      return fetch("https://raw.githubusercontent.com/mrmeihem/vue-js/main/spendings.json")
          .then(result => result.json())
          .catch(error => console.log(error))
    }
  },
  created(){
    this.paymentsList = this.fetchData();
    console.log(this.paymentsList);
  }
};
</script>

<style lang="scss" module>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.wrapper {
}
</style>