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, а отображаемая цена верна. Но когда я нажимаю на качество новой статьи, цена не обновляется?