Delete working!

src/page/App.vue

@@ -41,9 +41,17 @@
       </div>
 
       <div class="groupings card-columns" v-if="apiKey">
-        <div class="grouping card" v-for="grouping in groupings" v-bind:key="grouping.tags">
+        <div class="grouping card" v-for="(grouping, index) in groupings" v-bind:key="grouping.tags">
           <div class="card-body">
-            <h5 class="card-title">{{ grouping.tags }}</h5>
+            <h5 class="card-title">
+              {{ grouping.tags }}
+              <button type="button"
+                class="btn btn-link"
+                :dataIdx="index"
+                @click="deleteGrouping(index)">
+                delete
+              </button>
+            </h5>
             <p class="card-text" v-if="grouping.loading">
               loading...
             </p>
@@ -75,6 +83,11 @@ export default {
     }
   },
   methods: {
+    deleteGrouping(index) {
+      this.groupings.splice(index, 1);
+      var data = { groupings: this.groupings };      
+      chrome.storage.sync.set(data, () => { });
+    },
     refreshGroupings(event) {
       for(var key in this.groupings) {
         var grouping = this.groupings[key];