highlighting selected position

partials/CellStyleEditor.vue

 <template lang="pug">
-  .q-mt-md
+  div
     .bg-grey-9.q-pa-md
       .q-caption.text-grey-6.q-mb-sm Image position
       .text-center
-        template(v-for="(position, index) in css.positions")
-          q-btn.q-ma-xs.bg-grey-8(@click="setStyle(position)", round, size="sm", flat)
+        template(v-for="(position, index) in css.backgroundPositions")
+          q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
+          :class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
           br(v-if="index === 2 || index === 5")
 </template>
 
@@ -14,23 +15,26 @@
     props: ['cell'],
     data () {
       return {
+        updatedCell: {stylesheet: {value: undefined}},
         model: {
           backgroundPosition: undefined
         },
         css: {
-          positions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right']
+          backgroundPositions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right']
         }
       }
     },
+    mounted () {
+      if (!this.cell.stylesheet.value) this.setStyle('bg-center')
+    },
     methods: {
       async setStyle (position) {
-        console.log(position)
         let _cell = this.cell
         if (_cell.id) {
           try {
-            let _c = await this.$store.dispatch('cells/patch', [_cell.id, { stylesheet: {value: position} }])
+            this.updatedCell = await this.$store.dispatch('cells/patch', [_cell.id, { stylesheet: {value: position} }])
             // console.log('worked', this.cell)
-            this.$store.commit('mosys/setUpdatedCell', _c)
+            this.$store.commit('mosys/setUpdatedCell', this.updatedCell)
           }
           catch (err) {
             console.log('error: ', err)