Almost getting pins

src/background.js

@@ -1,6 +1,7 @@
 chrome.runtime.onInstalled.addListener(function() {
     var data = {
         apiKey: null,
+        pins: [],
         groupings: []
     };
 

src/page/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app">
-    <div class="fluid-container">
+    <div class="fluid-container">      
+      <div class="alert alert-danger" role="alert" v-if="error">
+        {{ error }}
+      </div>
       <h1>Pinboard Groupings</h1>
       <div class="card">
         <div class="card-body">
@@ -18,14 +21,18 @@
             <button type="submit" class="btn btn-primary btn-sm" v-if="!apiKey">save</button>
             <button type="button" class="btn btn-secondary btn-sm" @click.prevent="edit" v-else>edit</button>
           </form>
-
         </div>
       </div>
+
+      <div v-for="pin in pins" v-bind:key="pin.hash">
+        {{ pin.hash }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
 export default {
   data () {
     return {
@@ -33,18 +40,31 @@ export default {
       groupings: [],
       form: {
         apiKey: null
-      }
+      },
+      error: null
     }
   },
   methods: {
+    getPins() {
+      axios.get("https://api.pinboard.in/v1/posts/all?auth_token=" + this.apiKey)
+        .then(response => {
+          this.pins = response;
+          var data = { pins: this.pins };
+          chrome.storage.sync.set(data, () => {
+            console.log('done');
+          })
+        })
+        .catch(error => {
+          this.error = error;
+        });
+    },
     save(event) {
       var data = {
-        apiKey: this.form.apiKey,
-        groupings: this.groupings
+        apiKey: this.form.apiKey
       };
       chrome.storage.sync.set(data, () => {
         this.apiKey = data.apiKey;
-        this.groupings = data.groupings;
+        this.getPins();
       });
     },
     edit(event) {
@@ -52,10 +72,15 @@ export default {
       this.apiKey = null;
     }
   },
-  created() {
-    chrome.storage.sync.get(['apiKey', 'groupings'], result => {
+  mounted() {
+    chrome.storage.sync.get(['apiKey', 'groupings','pins'], result => {
       this.apiKey = result.apiKey;
       this.groupings = result.groupings;
+      this.pins = result.pins;
+
+      if (this.apiKey && this.pins.length == 0) {
+        this.getPins();
+      }
     });
   }
 }