Vue

HTML

<div class="problems-calc" id="calc">
                    <h4 class="problems-calc__title text-center">Воспользуйтесь калькулятором</h4>
                    <select v-model="selected" name="diam" id="diam" class="calc-diam">
                        <option selected disabled hidden>Выберите диаметр</option>
                        <option value="6">6 мм</option>
                        <option value="8">8 мм</option>
                        <option value="10">10 мм</option>
                        <option value="12">12 мм</option>
                        <option value="14">14 мм</option>
                        <option value="16">16 мм</option>
                        <option value="18">18 мм</option>
                        <option value="20">20 мм</option>
                        <option value="22">22 мм</option>
                        <option value="25">25 мм</option>
                        <option value="28">28 мм</option>
                        <option value="32">32 мм</option>
                        <option value="36">36 мм</option>
                        <option value="40">40 мм</option>
                    </select>
                    <div class="calc-inputs">
                        <div class="calc-kg">
                            <span>Килограммы:</span>
                            <input @focus="focusKg" v-model="kilo" type="number">
                        </div>
                        <div class="calc-metr">
                            <span>Метры:</span>
                            <input @focus="focusMetr" v-model="metr" type="number">
                        </div>
                    </div>
                </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.problems-calc {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  max-width: 388px;
  width: 100%;
}

.problems-calc__title {
  margin-top: 0px;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 25px;
  color: #fff;
}

.calc-inputs {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
}

.calc-kg,
.calc-metr {
  display: flex;
  flex-direction: column;
  max-width: 184px;
  width: 100%;
}

.calc-kg input,
.calc-metr input {
  font-size: 15px;
  padding: 11px 15px;
  border-radius: 5px;
  background-color: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.22);
}

.calc-diam {
  font-size: 15px;
  padding: 11px 15px;
  border-radius: 5px;
  background-color: #F0F0F0;
  border: 1px solid rgba(0, 0, 0, 0.22);
}

Vue

var calc = new Vue({
    el: '#calc',

    data: {
        selected: '6',
        kilo: 1,
        metr: 0.617,
        focus: 'kg', // Определяет элемент который изменяем
    },

    methods: {
        focusKg: function() {
            this.focus = 'kg'
        },
        focusMetr: function() {
            this.focus = 'metr'
        },
        calcKilo: function() {
            if (this.focus == 'metr') {
                var selected = +this.selected // Приводим строку к числу
                this.kilo = Number((this.metr * armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
            }
        },
        cakcMetr: function() {
            if (this.focus == 'kg') {
                var selected = +this.selected // Приводим строку к числу
                this.metr = Number((this.kilo / armatura[selected]).toFixed(3)) // Вычисляем, округляем до 3 знаков после точки и убираем незначащие нули
            }
        }
    },
    watch: {
        kilo: function() {
            this.cakcMetr()
        },
        metr: function() {
            this.calcKilo()
        },
        selected: function() {
            this.calcKilo()
            this.cakcMetr()
        }
    }
})

// 'Диматер арматуры' => 'пропорция'
// Для вычисления массы в кг нужно умножить на пропорцию
// Для вычисления длины в метрах нужно разделить на пропорцию
var armatura = {
    6: 0.222,
    8: 0.395,
    10: 0.617,
    12: 0.888,
    14: 1.21,
    16: 1.58,
    18: 2,
    20: 2.47,
    22: 2.98,
    25: 3.85,
    28: 4.83,
    32: 6.31,
    36: 7.99,
    40: 9.87
}