JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <input v-model="apples">
  <input v-model="oranges">
</div>

JavaScript

new Vue({
  el: '#app',
  
  data () {
    return {
      applesRaw: 3.2,
      applesToOranges: 3.4
    }
  },
  
  computed: {
    oranges: {
      get () {
        return (this.applesRaw * this.applesToOranges).toFixed(2)
      },
      
      set (value) {
        this.applesRaw = (value || 0) / this.applesToOranges
      }
    },
    
    apples: {
      get () {
        return this.applesRaw.toFixed(2)
      },
      
      set (value) {
        this.applesRaw = +value
      }    
    }
  }
})