:recycle: simplifying pairing button states

frontend/src/components/PairingButton.vue

 <template lang="pug">
 .pairing-button.w-flex.row
-    w-button(:class='status' v-if='status == "pristine"')(@click='pass')
-        p.pa4.text-upper pass
-    w-button(:class='status' v-if='status == "pristine"')(@click='pair')
-        p.pa4.text-upper pair
-    w-button(:class='status' v-if='status == "pending"')
-        p.pa4.text-upper pending
-    w-button(:class='status' v-if='status == "paired"')
-        p.pa4.text-upper paired
+    template(v-if='status == "pristine"')
+        w-button(:class='status')(@click='pass')
+            p.pa4.text-upper pass
+        w-button(:class='status')(@click='pair')
+            p.pa4.text-upper pair
+    template(v-else-if='status == "pending"')
+        w-button(:class='status')
+            p.pa4.text-upper pending
+    template(v-else)
+        w-button(:class='status')
+            p.pa4.text-upper paired
 </template>
 
 <script>
 export default {
-    props: {},
+    props: {
+        status: {
+            required: false,
+            type: String,
+            default: 'pristine',
+        },
+    },
     emits: ['pair', 'pass'],
-    data: () => ({
-        status: 'pristine',
-    }),
     methods: {
         pair() {
             this.$emit('pair')