Vue.jsを使って、jsonのデータを書き換えたい

Question

前提・実現したいこと

現在、Vue.jsとjsonを用いてWebアプリ(SPA)を作る練習をしています。

実装したい機能：簡単なフリマアプリのようなものを作ろうとしています。もともとJSONのデータに商品の情報が格納されていて、購入ボタンをクリックするとJSONからその商品の情報が削除される機能です。

発生している問題・エラーメッセージ

JSONのデータを書き換える（削除）方法がわかりません。

該当のソースコード

<div class="dispArea">
          <div class="good" v-for="(good, index) in goods" v-bind:key="good.id">
            <div class="card bg-light mb-3" style="width: 20rem; float:left">
              <img v-bind:src="good.image" class="card-img-top" style="height: 200px;">
              <div class="card-body">
                <h5 class="card-title">{{ good.title }}</h5>
                <p class="card-text">{{ good.price }}</p>
                <p class="card-text">{{ good.explanation }}</p>
                <p class="card-text">{{ good.category }}</p>
                <div class="text-right">
                  <a href="buy.html"><button class="btn btn-primary" v-on:click="deleteEvent(index)">購入する</button></a>
                </div>
              </div>
            </div>
          </div>
        </div>

function Main() {
  goodsApp = new Vue({
    el: "#goodsApp",
    data: {
      goods: []
    },
    methods: {
      deleteEvent: function(index) {
        this.goods.splice(index, 1);
      },

{
  "goods": [
    {
      "id": 1,
      "title": "macbook",
      "image": "images/macbook.jpg",
      "price": "￥19,800",
      "category": "家電",
      "explanation": "高性能なノートパソコン"
    },
    {
      "id": 2,
      "title": "腕時計",
      "image": "images/armClock.jpg",
      "price": "￥1,800",
      "category": "その他",
      "explanation": "どこにいても時間を確認できる"
    },

試したこと

https://qiita.com/watsuyo_2/items/e66c4f5986f9ffd7cf57

https://www.paveway.info/entry/2020/02/23/vue_deletelist

こちらのサイトを真似したらwebページから一時的に削除することはできましたが、JSONのデータには残ったままになってしまいます。（ページの再読み込みで元に戻ってしまう）

補足情報（FW/ツールのバージョンなど）

Vue.jsのバージョン : 2.6.11
Bootstrapのバージョン ： 4.5.0

Answer 1

以下のようなメソッドを設けて解決しました。

deleteEvent: function() {
        fetch(baseURL+'/'+this.number, {
          method: 'DELETE'
        }).then(function(res){
          fetch(baseURL, { method: 'GET' })
          .then(function(response){
            return response.json();
          })
          .then(function(res) {
            if(Array.isArray(res)) {
              goodsApp.goods = res;
              console.log(goodsApp.goods);
            }
            else {
              goodsApp.goods = [res];
            }
          });
        });
      }