use Object.assign instead of Vue.set - change duration to computed prop

app/assets/javascripts/vue_pipelines_index/store.js.es6

@@ -25,11 +25,11 @@
         this.$http.get(`${url}?scope=${apiScope}&page=${pageNum}`)
           .then((response) => {
             const pageInfo = pageValues(response.headers);
-            Vue.set(this, 'pageInfo', pageInfo);
+            this.pageInfo = Object.assign({}, this.pageInfo, pageInfo);
 
             const res = JSON.parse(response.body);
-            Vue.set(this, 'pipelines', res.pipelines);
-            Vue.set(this, 'count', res.count);
+            this.count = Object.assign({}, this.count, res.count);
+            this.pipelines = Object.assign([], this.pipelines, res.pipelines);
 
             updatePipelineNums(this.count);
             this.pageRequest = false;

app/assets/javascripts/vue_pipelines_index/time_ago.js.es6

@@ -29,23 +29,23 @@
         if (!finished && changeTime) return false;
         return ({ words: this.timeAgo.format(finished) });
       },
-    },
-    methods: {
       duration() {
         const { duration } = this.pipeline.details;
         if (duration === 0) return '00:00:00';
         if (duration !== null) return duration;
         return false;
       },
+    },
+    methods: {
       changeTime() {
         this.currentTime = new Date();
       },
     },
     template: `
       <td>
-        <p class="duration" v-if='duration()'>
+        <p class="duration" v-if='duration'>
           <span v-html='svgs.iconTimer'></span>
-          {{duration()}}
+          {{duration}}
         </p>
         <p class="finished-at" v-if='timeStopped'>
           <i class="fa fa-calendar"></i>