rendering out new spaces to the browser

package.json

 {
   "name": "kinopio-api",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/SampleComponent.vue

 <template>
   <div class="hello">
-    <p>Something</p>
+    <h1>{{ new_space.name }}</h1>
+    <p>
+      <a :href="'https://kinopio.club/' + new_space.url">{{
+        new_space.name
+      }}</a>
+    </p>
   </div>
 </template>
 
 <script>
 export default {
   name: 'SampleComponent',
+  props: {
+    new_space: Object,
+  },
 }
 </script>
 

src/views/Home.vue

 <template>
   <div class="home">
-    <SampleComponent />
+    <SampleComponent
+      v-for="new_space in new_spaces"
+      :key="new_space.id"
+      :new_space="new_space"
+    />
   </div>
 </template>
 
@@ -25,6 +29,7 @@ export default {
     axios
       .get('https://api.kinopio.club/space/new-spaces')
       .then((response) => {
+        this.new_spaces = response.data
         console.log('new_spaces:', response.data)
       })
       .catch((error) => {