mértékegység átváltó

/// https://9c1h7.csb.app/
<template>
  <div id="app">
    <span
      :class="key===mode?'oa':'ob'"
      :key="key"
      v-for="(elem, key) in c"
      @click="mode=key, a=0"> {{elem.kii}} </span><hr>
    <select v-model="mode">
      <option
          :key = "key"
          v-for="(elem, key) in c"
          :value="key">{{elem.kii}}</option>
    </select> átváltó<br><br><br>
    <input
      @click="$event.target.select()"
      placeholder="lóerő"
      v-model.number="a"> {{c[mode].me1}} <br>
    <input
      @click="$event.target.select()"
      placeholder="kw"
      v-model.number="a2"> {{c[mode].me2}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: 0,
      a: 0,
      c: [
        { p:0, sz: 1.34, me1: 'kw', me2: 'Le', kii: 'Teljesítmény (KW - Le)' },
        { p:32, sz: 9/5, me1: '℃', me2: '℉', kii: 'Hőmérséklet (℃ - ℉)' },
        { p:0, sz: 3.6, me1: 'm/s', me2: 'km/h', kii: 'Sebesség (km/h - m/s)' },
      ]
    }
  },
  computed: {
    a2: {
      get() {
        return Number( (this.c[this.mode].p+this.a*this.c[this.mode].sz).toFixed(2) )
      },
      set(x) {
        this.a=Number( ( (x-this.c[this.mode].p)/this.c[this.mode].sz).toFixed(3) )
      }
    }
  }
};
</script>

<style>
.oa {
  background: rgb(70, 55, 77);
  color: aliceblue ;
}
.ob {
  background: rgb(202, 186, 210);
}
span {
  cursor:pointer ;
  background: #ecf;
  margin:10px;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 1px 1px 3px black;
}
body, input, select {
  font-size: 24px;
}
</style>