title: Vue.js form not reactive
body: <p>So I have simple calculator. User picks font, then size and by typing words, price calculating.</p>
  
  <p>Problem is that some elements in this form not reactive, sorry about terminology I'm new to Vue.js.</p>
  
  <p>Thi is my HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
  
      &lt;ul&gt;
          &lt;li v-for="font in fontTypes" v-on:click="fontType(font)"&gt;{{ font.name }}&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
          &lt;li v-for="currentFont in currentFonts" v-on:click="fontSize(currentFont)"&gt;{{ currentFont.size }}&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;input type="text" v-model="result"&gt;
  
      &lt;div id="result"&gt;
          &lt;p&gt;{{ finalPrice }}&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is JS:</p>
  
  <pre><code>var formatter = new Intl.NumberFormat('lt-LT', {
          style: 'currency',
          currency: 'EUR',
          minimumFractionDigits: 2
      });
  
      var vm = new Vue({
  
          el: '#app',
          data: {
              result: '',
              currentFonts: '',
              selectedFont: '',
              selectedSize: '',
              selectedFontSizePrice: '',
              fontTypes: [
                  { name: 'Font 1', params: [ {size: '2.5', price: '3.10'}, {size: '3', price: '5'} ] },
                  { name: 'Font 2', params: [ {size: '3', price: '4'}, {size: '4', price: '7'} ] },
                  { name: 'Font 3', params: [ {size: '7', price: '45'}, {size: '8', price: '50'} ] }
              ]
          },
          computed: {
              finalPrice: function() {
                  var letterCount = this.result.replace(/\s/g, "").length;
                  var letterPrice = this.selectedFontSizePrice;
                  var price = letterCount * letterPrice;
                  return formatter.format(price);
              }
          },
          methods: {
              fontType: function(selectedFont) {
                  this.selectedFont = selectedFont.name;
                  this.currentFonts = selectedFont.params;
              },
              fontSize: function(selectedSize) {
                  this.selectedSize = selectedSize.size;
                  this.selectedFontSizePrice = selectedSize.price;
              }
          }
  
      });
  </code></pre>
  
  <p>selectedFontSizePrice is not reactive. When I change font (selectedFont) selectedFontSizePrice  remains same. I need some kind of clearing if parent selector changes, or even better select first value from list and recalculate finalPrice. Or maybe I'm doing something completely wrong here?</p>