【Vue.js】ラジオボタンで複雑な値を出力させたい

<form>
    <label for="kb">1KB：</label>
    <input type="radio" id="kb" v-model="unit" @change="onchange"
　　<!--v-bindには配列型オブジェクトのデータが渡せる-->
        :value="{ name: 'キロバイト', size: 1024 }" /><br>
    <label for="mb">1MB：</label>
    <input type="radio" id="mb" v-model="unit" @change="onchange"
        :value="{ name: 'メガバイト', size: 1048576 }" /><br>
    <label for="gb">1GB：</label>
    <input type="radio" id="gb" v-model="unit" @change="onchange"
        :value="{ name: 'ギガバイト', size: 1073742000 }" />
</form>
{{ onchange() }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="template.js" charset="utf-8"></script>

var app = new Vue({
    el: '#app',
    data: {
        unit:'',
    },
    methods: {
        onchange: function() {
            return this.unit.name + '：' + this.unit.size;
    }
    }
});

以下のような出力結果となります。

参考

速習Vue.js 速習シリーズ 山田祥寛