[Vuejs]-Making text go to new text

Vue.component("barista-template",{
    template: "#b-template",
    data: function () {
        return{
            order_type:"",
            order_value: "",
        }
    },
    computed: {
        showText () {
            if(this.order_type === '') return '';
            return 'One ' + this.order_type + ' that would be ' + this.order_value
        },
        showText2 (){
            if(this.order_type === '') return '';
            return 'waiting for ' + this.order_type
        }
    },
    methods: {
        choose: function (order_type) {
            this.order_type = order_type;

            if (this.order_type == "drip") {
                this.order_value = "$10";
            }
            if (this.order_type == "frenchpress") {
                this.order_value = "$20";
            }
            if (this.order_type == "aeropress") {
                this.order_value = "$30";
            }
        }
    },
});
new Vue ({
    el:"#app",
    data:function () {
        return{
            showing:true
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>


<div id="app">
    <barista-template></barista-template>
</div>




    <!--template for customer-->
<script type="text/x-template" id="b-template">
    <div>
        <div>{{showText}}</div>
        <button v-on:click="choose('drip')">Drip</button>
        <button v-on:click="choose('frenchpress')">French Press</button>
        <button v-on:click="choose('aeropress')">Aeropress</button>
        <div>{{showText2}}</div>
    </div>
</script>

<script type="text/x-template" id="c-template">
    <div>
        <div>{{showText2}}</div>
    </div>
</script>