Bootstrap 4单选按钮组和范围滑块，更改单选按钮更新价格

Question

我有一组四个单选按钮和一个范围滑块。单选按钮表示商品的质量，范围滑块表示商品的字数。当我单击按钮之一时，我想更新价格变量。这是我的代码：

<div class="form-group text-center">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
         <label class="btn btn-outline-dark btn-sm open-sans small">
              <input v-model="selected" type="radio" id="text_level_a" value="a"> Grade "A" Text
         </label>
         <label class="btn btn-outline-dark btn-sm open-sans small active">
              <input v-model="selected" type="radio" id="text_level_b" value="b"> Grade "B" Text
         </label>
         <label class="btn btn-outline-dark btn-sm open-sans small">
              <input v-model="selected" type="radio" id="text_level_c" value="c"> Grade "C" Text
         </label>
         <label class="btn btn-outline-dark btn-sm open-sans small">
              <input v-model="selected" type="radio" id="text_level_d" value="d"> Grade "D" Text
         </label>
    </div>
</div>

<br />

<p class="text-center">
    <template>
         <div>
              <label for="word_count" class="">
                  Word Count:
              </label>

              <input class="custom-range" id="word_count" v-model="word_count" type="range" min="500" max="15000">
              <div class="mt-2 ">@{{ word_count }} Words</div>
         </div>
    </template>
</p>

<div class="col-6 col-sm-6 col-md-4 offset-md-2 col-lg-3 offset-lg-3 col-xl-3 offset-xl-3">

            <h2 class="text-center">
                Client Pays:
            </h2>

            <p class="text-center  lead">
                $@{{ clientPays }}
            </p>

        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">

            <h2 class="text-center">
                Writer Gets:
            </h2>

            <p class="text-center  lead">
                $@{{ authorGets }}
            </p>


        </div>

这是我的Vue脚本：

var app = new Vue({
            el: '#app',
            data() {
                return {
                    word_count: '500',
                    selected: "b"
                }
            },
            computed: {
                clientPays: function () {
                    if(this.selected === 'a')
                    {
                        return (this.word_count * 0.068 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'b')
                    {
                        return (this.word_count * 0.020 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'c')
                    {
                        return (this.word_count * 0.016 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'd')
                    {
                        return (this.word_count * 0.012 + 0.35).toFixed(2);
                    }
                },
                authorGets: function () {
                    if(this.selected === 'a')
                    {
                        return (this.word_count * 0.051 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'b')
                    {
                        return (this.word_count * 0.015 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'c')
                    {
                        return (this.word_count * 0.012 + 0.35).toFixed(2);
                    }
                    if(this.selected === 'd')
                    {
                        return (this.word_count * 0.009 + 0.35).toFixed(2);
                    }
                }
            }
        })

当我加载页面时，字数为500，文章质量为b，显示的价格正确。但是，当我单击新文章质量时，价格不会更新吗？