【Vue.js】消費税を計算する機能を作りたい

    <div id="app">
        <h1>消費税計算(消費税0.8%の時)</h1>
        <!--v-modelはhtmlでいうところのvalueに等しいと思われる-->
        <input type="text" v-model="badget"><h2>税込価格に変えると</h2>
        <p>{{ badgetChnage }}円の価値があります。</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                badget: 100
            },
            
            computed:{
                badgetChnage: function() {
                    return this.badget * 1.08;
                }
            }
        });
    </script>
<!--v-modelはhtmlでいうところのvalueに等しいと思われる-->
<input type="text" v-model="badget">

ですが、

v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。
フォーム入力バインディング — Vue.js

とのこと。