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>
                            <!-- {{ calcKg(selected, metr) }} -->
                            <input v-model="kilo" type="number">
                        </div>
                        <div class="calc-metr">
                            <span>Метры:</span>
                            {{ calcMetr(selected, kilo) }}
                            <input 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 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
}

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

    data: {
        selected: 'Выберите диаметр',
        kilo: 1,
        metr: 1,
        armatura: armatura
    },

    methods: {
        calcMetr: function(selected, kilo) {
            selected = +selected;
            this.metr = kilo * armatura[selected];
            this.metr.toFixed(3);
        },
        // calcKg: function(selected, metr) {
        //     selected = +selected;
        //     this.kilo = metr / armatura[selected];
        //     this.kilo.toFixed(3);
        // }
    },
})