Vue.js tile and border area coverage calculator?

Question

Vue.js

Good afternoon.
I'm learning Vue.js and got a little bit of cognitive dissonance.
A simple calculator for calculating the cost by price and quantity, no problem.
But then ...
I want to make a calculator from a bunch of inputs, in which.
1. There is a list to choose from, let's say building tiles with Value and Data-value parameters.
Using jquery I would just get the data-value $('select').attr('data-value') and not bother.

<select>
  <option disabled value="">Выберите один из вариантов</option>
  <option value="10" data-value="15">А-10</option>
  <option value="20" data-value="25">А-20</option>
  <option value="30" data-value="35">А-30</option>
  <option value="40" data-value="45">А-40</option>
</select>

2. There are input fields for the area to
cover

<input
  type="number"
  placeholder="Ширина"
  name="width"
  v-model="width"
  v-on:input="area = width * lenght">
<input
  type="number"
  placeholder="Длина"
  name="lenght"
  v-model="lenght"
  v-on:input="area = width * lenght">
<br>
<input
  type="number"
  placeholder="Площадь"
  name="area"
  v-model="area"
  v-on:input="cost = area / count">

3. So that all this can be considered.

<span>{{ text1 }}{{ area }}</span><br>
<span>{{ text2 }}{{ cost }}</span>

4. And the button itself: Why the hell do I need it, I haven’t decided yet - probably out of habit. And actually here is the main victim of my research.
<button v-on:click="">Расчитать</button>

var app = new Vue({
    el: '#app_calc',
    data: {
      item: '',
      text1: 'Площадь: ',
      text2: 'Колличество: ',
      width: 10,
      lenght: 10,
      area: 0,
      count: 0,
      cost: 0
    },
    methods:{
      deem: function (){
      }
    }
  })

What is the essence of the question:
1. Push towards understanding how best to implement this very list with value and data-value for further processing of them.
2. How to actually rotate variables? Methods? Ok, how to access them in a method? In general, I do not understand anything.
PS: "smart" trolls go to the farm.

Answer 1

1. You can even dynamically create all lists)
https://ru.vuejs.org/v2/guide/forms.html#%D0%92%D1...
2. See if something has changed and recalculate everything
https:/ /en.vuejs.org/v2/api/#watch
ps But it's better to write it in computed, then it will track everything itself
As an example:
https://codepen.io/andreysh/pen/ZwXPOj

Answer 2

Yes, I'm looking at similar questions here, and I realized that I went a little in the wrong direction.
But so far I'm still lost =_=